I am extremely new to CSS and am trying to edit the CSS on my WordPress theme. I am trying to change the date text on each blog post to a centered diamond. Right now, I am having trouble getting the diamond centered on the post.
Forgive the extremely messy CSS. I know it's botched.
.post_detail post_date {
width: 100%;
float: left;
margin-bottom: 20px;
text-align: center;
}
.post_info_date {
background: #fff;
height: 60px;
text-align: center;
transform:rotate(45deg);
width: 60px;
position: inherited;
bottom: 20%;
}
.post_info_date span {
color: #333;
display: table-cell;
height: 60px;
transform: rotate(-45deg);
vertical-align: middle;
width: 100%;
}
Make USe of line-height property.
CSS
.post_info_date span {
color: #333;
display: block;
transform: rotate(-45deg);
vertical-align: middle;
width: 100%;
line-height:60px;
}
Style Accordingly.
Hope this Helps..
Related
So I have been a developer and pretty proficient at CSS and coding styling. There is a new design that has been approved and trying to figure out the best way to accomplish this. Here is a screenshot of what I am trying to achieve with drawing borders and lines but they need to extend both left and down:
https://cdn2.hubspot.net/hubfs/2323601/Epsilon_April2017/Images/Screen%20Shot%202017-05-02%20at%209.19.29%20AM.png
Does anyone have any insights on how to achieve this with HTML/CSS? Obviously going to tablet and mobile it would be removed, but on desktop they want to achieve this. I do not want to do a flattened image, but that is the only way I am leaning right now.
I have tried creating the lines as an image which i am placing below the left text
Is only playing with CSS
body{
background: black;
margin: 0;
}
.div{
position: relative;
width: 80%;
background: grey;
display: table;
margin-top: 50px;
}
.a,
.b{
display: table-cell;
color: white;
}
.a{
text-align: right;
font-size: 1.2em;
padding: 15px;
border-bottom: 2px solid white;
}
.b{
width: 140px;
}
.b div{
position: absolute;
background: pink;
font-size: 1em;
bottom: 0;
border: 2px solid white;
padding: 8px;
}
strong{
display: block;
width: 150px;
float: right;
}
.b div:before{
content: "";
display: block;
position: absolute;
width: 2px;
height: 50px;
background: white;
top: 100%;
left: -2px;
}
<div class="div">
<div class="a">OUR INDUSTRY-LEADING <br><STRONG>EXPERTS ARE READY TO</STRONG></div>
<div class="b"><div>GROW YOUR BUSSINES</div></div>
</div>
I'm trying to align vertically a text block. I have a :before pseudo-element and what I'd like to achieve is having both aligned to the middle.
Is it possible to achieve it without extra wrapper? Here's what my problem looks like:
HTML:
<div class="fail">Something's wrong</div>
<div class="success">
<span>Perfect middle</span>
</div>
CSS fail:
.fail
{
background: orange;
font-size: 30px;
display: inline-block;
}
.fail:before
{
background: red;
content: '✗';
text-align: center;
display: inline-block;
line-height: 60px;
margin-right: 10px;
vertical-align: middle;
width: 60px;
}
CSS success:
.success
{
font-size: 30px;
background: lime;
display: inline-block;
}
.success:before
{
background: green;
content: '✓';
text-align: center;
display: inline-block;
line-height: 60px;
margin-right: 10px;
vertical-align: middle;
width: 60px;
}
.success span {
vertical-align: middle;
}
It might be not so obvious from this picture, but the left one is too high, about 2-3 pixels of difference. It matters especially for smaller elements.
So my question is: can I achieve perfect middle with just one HTML tag + :before?
Because I dont like inline elements that much, I would do it like this:
.fail {
position: relative;
float:left;
padding-right: 10px;
line-height: 60px;
font-size: 30px;
background: orange;
}
.fail:before {
content: '✗';
display: inline-block;
width: 60px;
margin-right: 10px;
text-align: center;
background: red;
}
I would like to put 2 lines behind my headers on my website. I have found CSS to put one solid line behind the text, but I'd really like to have two lines behind my text of different widths (one a little bit thicker with space in between them).
Would anyone know how to adjust this code to make it possible to have two lines behind the text?
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: red;
}
h1:before {
margin-left: -50%;
text-align: right;
}
.color {
background-color: #ccc;
}
Here's the HTML:
<h1>Header Title Goes Here</h1>
And if it's not as simple as just adjusting this code, is there any CSS method I could use to achieve this effect?
As opposed to setting a height/background, you can alternatively set a border instead.
jsFiddle demo
Updated for margins..
I added 2% I don't know if that enough, but you can just change margin-left you will notice a difference in 2%.
jsFiddle demo - with margins.
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 40%;
overflow: hidden;
width: 50%;
height: 4px;
content: '\a0';
border-bottom: 3px solid red;
border-top: 1px solid red;
}
h1:before {
margin-left: -52%;
text-align: right;
}
h1:after {
margin-left:2%;
text-align:left;
}
.color {
background-color: #ccc;
}
I want to vertically middle align text in a div that has height in percentage. The code i am using is this.
CSS-
.div{
position: fixed;
left: 0px;
border-radius: 10px;
height: 6%;
width: 20%;
transform: translate(-10px,0px);
-ms-transform: translate(-10px,0px);
-webkit-transform: translate(-10px,0px);
-o-transform: translate(-10px,0px);
-moz-transform: translate(-10px,0px);
z-index: 10
}
.div span {
text-align: center;
font: 20px/100% Arial, Helvetica, sans-serif;
text-decoration: none;
color: #fff;
display: block;
vertical-align: middle;
}
HTML-
<div class="div"><span>This is some text.</span></div>
This isnt working. Please help.
You can use the parent div display as table and child div display as table-cell or another approach if you use a text with one line then use line-height property.
Css with table-cell display See fiddle
.div{
position: fixed;
left: 0px;
border: 1px solid black;
border-radius: 10px;
height: 50%;
width: 20%;
z-index: 100;
display: table;
}
.div span {
text-align: center;
font: 20px/100% Arial, Helvetica, sans-serif;
text-decoration: none;
color: black;
display: block;
vertical-align: middle;
display: table-cell;
}
Css with line-height See fiddle
Try adding a line-height on the div equal to the actual height of that div.
So if you have
<div class = "foo"><span>Blah</span></div>
Your style should look like
.foo {height:5em; line-height:5em;}
span {font-size:1em;}
Further explanation and other examples if you want it.
I've discovered that I can have one or the other, but can't seem to figure out both.
My HTML is as follows:
<div id="middle">
<div id="middleinner"></div>
</div>
And the CSS goes a little something like this (z-indexes set for something else on the page, left out here because it's irrelevant, plus there's a few commented out things as I tried to figure it out as I went along):
html, body{
font-family: helvetica, sans-serif;
font-size: 1em;
height: 100%;
overflow: hidden;
}
#middle{
/* display: table;*/
display: table;
height: 80%;
width: 90%;
/* position: fixed;*/
position: absolute;
top: 10%;
left: 5%;
right: 95%;
bottom: 90%;
color: #000;
z-index: 0;
}
#middleinner{
padding: 0.5em 1em 0.5em 1em;
background-color: #F9F9F9;
display: table-cell;
/* display: inline-block;*/
border-radius: 1.5em;
vertical-align: middle;
/* margin-left: auto;
margin-right: auto;*/
text-align: center;
/* position: relative;*/
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
z-index: 20;
}
Anyway, if I change middleinner's position to relative instead of absolute, I've got vertical alignment at the cost of proper overflow handling. If I set it to absolute, I've got proper overflow handling at the cost of vertical alignment.
Is there a pure-CSS way that I can handle this?
Yes, a combination of line-height, inline-block, and vertical-align can do it.
#middle {
width: 80%;
margin: 10px auto;
border: 1px dashed black;
height: 500px;
line-height: 500px;
vertical-align: middle;
text-align: center;
}
#inner {
height: 50px;
width: 80%;
overflow: auto;
display: inline-block;
line-height: 1.1em;
}
Demo
To have it work with a dynamic height element, you'll have to use some JavaScript, since you're using jQuery, I'll go with that. It's perfectly possible to use vanilla JS for this one too.
resize = function(el) {
el.css({lineHeight: el.height() + "px"})
};
$(document).ready(function() {
var $middle = $("#middle");
resize($middle);
$(window).on("resize", function() {
resize($middle);
})
})