I can vertically center one-lined text with line-height, but also with padding-top and padding-bottom.
What are the pros and cons of each?
body {
font-size: 12px;
font-family: sans-serif;
}
div {
border: 1px solid #333;
padding-left: 10px;
padding-right: 10px;
display: inline-block;
}
.vcenter1 {
line-height: 50px;
}
.vcenter2 {
padding-top: 19px;
padding-bottom: 19px;
}
<div class="vcenter1">Lorem ipsum line-height...</div>
<div class="vcenter2">Lorem ipsum padding...</div>
For me both of the methods are valid for instances where the line of text is guaranteed to only ever span one line (either by nature of the containers width being fixed or by manipulation of the content and/or CSS white-space property), but it depends on your intention as to which is more appropriate:
If you want the height of the element the text is contained within to be fixed, then using line-height seems most appropriate and maintainable because changes to the size of the font wont impact the height of the container (unless the font becomes taller than the container).
If however the height of the container is not fixed and it's more important that the white-space either side of the font remains, padding is the more appropriate option.
There are of course other ways of centring text vertically within an element, this previous question How do I vertically center text with CSS? has a lot of useful information on the topic.
Purely in terms of vertically centering, it matters not a jot. But note that in the second case, you are padding around a line box whose height is proportional to the font-size. Different browsers use slightly different proportions by default, so the bordered box will be different sizes in different browsers. That won't happen in the first case.
Related
I was trying to center text in two adjacent divs and I can not understand what I am doing wrong.
Basically I have 2 divs each taken 50% of the window. The first div contains an image (which I successfully centered) and I am trying to center the text in the second div. So here is my Fiddle and I am using the following css:
.thumbnail-descr{
text-align: center;
min-height: 10px;
display: table-cell;
vertical-align: middle;
font-size: 26pt;
color: #bbb;
}
There is no point of having original DOM structure or CSS (the main thing is to have 2 divs taking all the width and one has a centered image another one has a text. How can I achieve it?
What I understand from the example is that you want to vertically center "Descr". There are several tricks to do that:
Adjust the padding and use box-sizing border-box to have better control of the height.
Use flexbox (still not broadly available): https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
If you know before hand that you'll have only one line of text you can use line-height.
(See the update for another option)
For example see this Fiddle:
.square{
width: 45%;
height: 200px;
border: 3px dotted #ddd;
display:inline-block;
margin: 0 10px 0 10px;
line-height: 200px;
}
But take a few things into account:
This will work only if you have one line of text, because on text wrap it will be broken.
This is not the normal use of line height, it's taking advantage of a side effect: text is vertically centered to the line-height.
This trick is used by some CSS frameworks (ie Bootstrap) to center the text on some components.
Update
I forgot another option, since you have one div inside the other you can use position: relative on the parent, and use absolute position for the child using top: 50% and a negative top margin. You'll need to setup the top margin to the half of the child height. (that's how modals are usually centered):
.square { position: relative; /*..*/ }
.thumbnail-descr{
position: absolute;
top: 50%;
margin-top: -10px;
/*...*/
}
See http://jsfiddle.net/diegof79/M4fKM/1/
Also you asked why your solution is not working... this can help to understand the reasons: http://phrogz.net/css/vertical-align/index.html
Before proceeding to giving you the solution, you could have he exact same result with a lot less code, giving so many classes for so little content can only lead to huge code.
The span class you are giving the text-align:center, doesn't fill up the whole width of the parent, so, where would it center the text since its width is equal to the text?
You can either put a 'text-align:center" to the span's parent, the square class, but I would use a different approach in general.
Not sure if you need a span.
If you remove span tag and use same css for the div styles, or simply ad a span class name to a your div class name- works perfectly.
i think the issue happen because the width in the description div
Try this suggestion:
warp the with div, the div will use thumbnail-descr class
<div class='square'>
<div class="thumbnail-descr"><span>Descr</span><div>
</div>
Update the thumbnail-descr
.thumbnail-descr{
text-align: center;
min-height: 10px;
background-color:red;
vertical-align: middle;
font-size: 26pt;
color: #bbb;
width:100%;
}
hope this help
I'm working through a CSS problem at http://www.codecademy.com/courses/web-beginner-en-jNuXw/0/1?curriculum_id=50579fb998b470000202dc8b (actually, just helping a friend learn HTML/CSS) and came across a curious issue. If you erase the content in any of the <p> tags within a <div>, the div shifts upward. For example, delete the word 'Mom' without deleting the <p>. As best as I can figure out, this is because the element is set to vertical-align: baseline and for some reason the baseline is changing. I just can't figure out exactly why it's changing or what is causing it to change.
To be clear, I'm not asking for help to get the div's to align. That's simply a matter of setting their vertical-align to 'top'. I'm just trying to understand how the document flow is calculated. The specific question is: why does the empty div shift upwards?
DEMO: jsFiddle
UPDATE: Here is a new jsFiddle - http://jsfiddle.net/tonicboy/2DtTw/3/ which removes a lot of rules to boil the problem down to a simplified use case. From this, we can see that when a <p> tag has text in it, the baseline of the parent <div> is set at the baseline of the text. When you remove the text, the baseline of the parent <div> is set to the bottom of the <div>. Why is that?
HTML:
<div class="friend" id="best_friend"><p>Arthur</p></div>
<div class="friend"><p>Batmanuel</p></div>
<div class="friend"><p>Captain Liberty</p></div>
<div class="friend"><p>The City</p></div>
<div class="friend"><p>Justice</p></div>
<div class="family"><p></p></div>
<div class="family"><p>Dad</p></div>
<div class="family"><p>Bro</p></div>
<div class="family"><p>Sis</p></div>
<div class="family"><p>Rex</p></div>
<div class="enemy"><p>Baron Violent</p></div>
<div class="enemy"><p>The Breadmaster</p></div>
<div class="enemy"><p>The Deadly Nose</p></div>
<div class="enemy"><p>Dinosaur Neil</p></div>
<div class="enemy" id="archnemesis"><p>Chairface</p></div>
CSS:
div {
position: relative;
display: inline-block;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;
margin-left: 5px;
margin-top: 5px;
text-align: center;
}
div p {
position: relative;
margin-top: 40px;
font-size: 12px;
}
.friend {
border: 2px dashed green;
}
.family {
border: 2px dashed blue;
}
.enemy {
border: 2px dashed red;
}
#best_friend {
border: 4px solid #00C957;
}
#archnemesis {
border: 4px solid #cc0000;
}
I think I've mostly figured out the reason, after digging through W3C specs. Here are three key items from the spec which may explain this behavior:
"Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose."
When you delete the text, the <p> element is no longer in-flow.
"The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge."
Because there are no in-flow elements within the parent div, the baseline becomes the bottom margin.
Because the div's are set to display: inline-block, their default vertical alignment is 'baseline'
Because the other div's have in-flow elements (the <p> tags), their baseline is set to the text baseline.
And that is why the empty box's bottom margin aligns with the baseline of the <p> tags in the other div's.
The baseline of the element is shifting because the text inside the <p> determs the baseline height:
In an inline formatting context, boxes are laid out horizontally, one
after the other, beginning at the top of a containing block.
Horizontal margins, borders, and padding are respected between these
boxes. The boxes may be aligned vertically in different ways: their
bottoms or tops may be aligned, or the baselines of text within them
may be aligned.
source: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
The height of each inline-level box in the line box is calculated. For
replaced elements, inline-block elements, and inline-table elements,
this is the height of their margin box; for inline boxes, this is
their 'line-height'.
source: http://www.w3.org/TR/CSS2/visudet.html#line-height
CSS assumes that every font has font metrics that specify a
characteristic height above the baseline and a depth below it. In this
section we use A to mean that height (for a given font at a given
size) and D the depth. We also define AD = A + D, the distance from
the top to the bottom.
source: http://www.w3.org/TR/CSS2/visudet.html#inline-box-height
So with this block being a inline-block and baseline is calculted based on the line-height which is calcuted by different font types. Because this <p> has no font/text the baseline will not be positioned.
place all the line-height: 0; and you will see that the one with no text/font doesn't react like the other does:
jsFiddle
So why are the other two elemets shifting that have text in them?
Well it's because the text excist of two lines of text. The margin of the text is bigger and uses more space, thus the baseline is pushed further
By using HTML and CSS only, I would like to make a row of text (single-letter) elements where each letter is both vertically and horizontally centered on a square colored background. Something like this:
I tried with: http://jsfiddle.net/63PQa/, but the background is not a square and positioning of the letter seems to be slightly off the center vertically even with vertical-align: middle.
In addition, I am wrapping this row of elements within a div, and this div is used inside (CSS or HTML) table, so there can't be any funky margin stuff which may affect its vertical centering inside a cell.
I only need to support major modern browsers, e.g. FF, Chrome, Safari 5+, Opera 11+ and IE 9+
I think I got it:
.square {
text-align: center;
font-size: 1.3em;
color: white;
background: #5bb75b;
display: inline-block;
height: 30px;
line-height:30px;
width: 30px;
}
And, for vertical align of the "try this" text in your jsfiddle:
.container {
height: 50px;
line-height: 50px;
// the rest as you have it
}
If you can tolerate hard-setting the height and width, that is. You need inline-block to get the browser to obey height and width on a span element. The line-height was needed to get the vertical centering working.
vertical-align... I just got rid of it. Doesn't seem to have any effect after I added line-height.
The 30px and 50px are just arbitrary. As long as the square height/width are bigger than the text, and the container height is bigger than the square height, you should be good.
This is the HTML:
<div>
<p>
We bring you the latest in entertainment & information services, right on your phone. From the latest of Bollywood to the futuristic applications, get it all here!
View All
</p>
</div>
And this is the CSS....
div{width: 350px;}
a{
padding: 30px;
background: red;
margin: 20px;
border-radius: 12px;
background: red;
color: #fff;
font: bold 12px Arial, Helvetica, sans-serif;
text-decoration: none;
}
I know this could be solved by using display: inline-block; in .a. But I would like to know why this is overlapping the text? Should it not to go beyond the text?
DEMO1
DEMO2 now a is within a block level of p.
And also have a look at this DEMO. Img is also an inline element. And why this is not overlapping, this should also be overlapping, right?
<a> tag is inline level but while <img> tag is both inline and block level specially inline-block. So <a> tag is overlapping because of inline level which is corresponding to the text but <img> tag won't overlap because it is behaving inline-block. And you may know the difference between them.
Reference: Is <img> element block level or inline level?
An inline element could not be set its width and height and even doesn't work correctly the margin behaviour what actually should do. The margin is applied only to left or right side. Actually this is why, inline element here <a> tag would not set its width and height and remain in same line and seems to be overlapped when applied padding values.
The following picture makes you clear to understand about inline vs inline-block
View Live Demo
It's overlapping because the default behavior for an <a> tag is to fit with the text. If you want it to behave like a block, then set display: block.
The initial value for the display property on a link is display: inline. This means that it will try to fit in with the text and will accept horizontal margins, and padding on all sides, which is exactly why your link overlaps the text. In order for it to accept vertical margins (so it doesn't overlap), you need to set it to display:block or inline-block if you want it to align with the text still.
Padding doesn't work well with inline elements.
Ref:Inline Elements and Padding
This actually is explained in the W3C spec, although it was a bit tricky to find.
Horizontal margins, borders, and padding are respected between these boxes.
This tacitly implies that vertical margins/borders/padding are not respected. It goes on to say:
The height of a line box is determined by the rules given in the section on line height calculations
If you move the <a> into the contents of the box
We bring you the latest in entertainment View All
You can see this effect: http://jsfiddle.net/rHCNb/7/ -- the horizontal padding is respected, but not the vertical. The fact that it covers the other text has to do with z-indexing.
Add the below property in a.
position:relative;
float:left;
Working DEMO
TIPS:
Write background-color instead of the shorthand background when you
are not associating any other property.
If you write display:block then the block width will be equal to the parent
width, so always write width with display.
a{
padding: 30px;
background-color: red;
margin: 20px;
border-radius: 12px;
color: #fff;
font: bold 12px Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
width: 50px;
}
DEMO
I have a set of <span> elements (each of them is nested to correspondent <div>). They build a stack of panels, like in the picture below.
When span contains some text, it has a normal height. But when it is empty, it's height is 0px. But I need it to have a normal height (to make it look like in the picture).
How to achive this behavior? (I tried to insert a space, but maybe there's a better solution).
Here is a simple and robust solution:
span.item:empty:before {
content: "\200b"; // unicode zero width space character
}
(Update 12/18/2015: rather than using \00a0 non-breaking space, use \200b, which is also a non-breaking space, but with zero width. See my other answer at https://stackoverflow.com/a/29355130/516910)
This CSS selector only selects the spans that are "empty", and injects some content into that empty space, namely a non-breaking space character. So no matter what font size and line-height you have set, everything around that <span> will fall into line, just as if you had text present in that <span>, which is probably what you want.
http://plnkr.co/edit/eXHphA?p=preview
The result looks like this:
I see two problems with using min-height:
it is vulnerable where font sizes change
the text baseline is not in the correct place
Here's what the counter-examples look like when things go wrong:
The font size changes, and now you have to hand tune the min-height again. You can't use the same class to support different parts of your website where font sizes are different. Here the font size in this place is 30, but the min-height is still set to 20. So the empty spans are not as tall. :-(
http://plnkr.co/edit/zeEvca?p=preview
Your empty span has the correct height with min-height, but it doesn't line up correctly with the text surrounding the span. The baseline falls incorrectly. Look at the line that says "Huh?" below:
http://plnkr.co/edit/GGd7mz?p=preview
Code for this last example:
<div class="group">
Hello <span class="item">Text</span>
</div>
<div class="group">
Huh? <span class="item"></span>
</div>
<div class="group">
Yes! <span class="correct"></span>
</div>
css:
.group {
background-color: #f1f1f1;
padding: 5px;
font-size: 20px;
margin-bottom: 20px;
}
.item {
background-color: #d2e3c5;
border-radius: 6px;
padding: 10px;
margin-bottom:5px;
display: inline-block;
min-height: 20px;
}
.correct {
background-color: #d2e3c5;
border-radius: 6px;
padding: 10px;
margin-bottom:5px;
display: inline-block;
}
.correct:empty:before {
content: "\00a0";
}
You could set span display:inline-block; and then add min-height
From the picture, it seems that you have already set display: block on the span elements. If not, add that. Alternatively, consider using div instead. The difference between the two elements is that span is inline by default, div is block by default, so why not use the latter?
Then you need to set min-height to a value that equals the height of items that have content. This is normally determined by their line height. The default line height varies by font (and by browser), so to get consistent results, set the line height explicitly, e.g.
* { line-height: 1.25; }
span { min-height: 1.25em; }
Maybe this will work -
span{
min-height:16px;
}