I have a button and with some text next to it, like this,
----------------
| |
| Button | Text
| |
----------------
I would like to have the text vertically aligned to the center of the button. How should I do this in CSS?
Here is my attempt:
http://jsbin.com/oduma4/4
I have found two problems with this approach:
The text is displayed on top in IE 6.
The two elements flow out of parent div so this layout will interfere with other divs.
To center text vertically set the line-height to the same as the height, for example:
#form-actions{ height: 30px; }
#text{ line-height: 30px; }
And set vertical-align to middle:
#text{ line-height: 30px; vertical-align:middle; }
So long as the element you are trying to vertically align and all of its siblings are inline or inline-block, just use vertical-align: middle.
Preview: http://jsfiddle.net/Wexcode/KceFF/
Related
I'm having problems to "middle" vertical align of a span with a different font size than the table cell itself.
What I want to achieve is this layout:
| |
| Measurement (font-size: 100%) unit (font-size: 70%)|
| |
So my markup looks like this:
<td class="value">Performance <span class="unit">kW</span></td>
The unit span is right aligned in the cell using float:right and the whole cell is styled with vertical-align:middle. The unit class uses a smaller font-size:70%. Both together do not work. It seems the floating style aligns the unit span on the top where the Measurment text starts to draw.
http://jsfiddle.net/Lszdx2hd/
Removing the floating style from the second span in this jsfiddle demonstrates the effect.
So is there an easy way of achieving the layout I want without much more markup and without floating styles? I tried relative positioning but then I cannot vertical center the unit span it seems.
Thanks!
If it is just about the relative alignment of the elements, float them both and make the line-height of the second span twice as high as the line-height of the first as it has 50% of the font-size. cf. http://jsfiddle.net/Lszdx2hd/1/
span {
font-size: 40px;
line-height: 1;
float: left;
}
span + span {
font-size; 50%;
line-height: 2;
float: right;
}
this way it will work independent of the font-size and/or height of the first span.
Usually people try to figure out how to vertically center stuff, I want to remove an instance of centered content and align and I'm stuck.
The content of the button (that is placed in a list in a table cell) is vertically centered by default. How can I remove this? How to align the contents of the <button> vertically to the top?
<table>
<tbody>
<td>
<ul>
<li>
<button>
<div>Content</div>
I have an example on jsFiddle.
button {
display: block;
position: relative;
background-color: pink;
width: 100%;
min-height: 200px;
}
<button>
<div>why?</div>
<div>are these centered vertically?</div>
<div>And how to remove it?</div>
</button>
Why the contents are vertically centered?
There's no specific reason. This is the way UAs handle the position of value/content of buttons (including <button>, <input type="button">)1.
How to remove vertical centering?
Well, there's a way to achieve that. First, a little background is needed.
But before that, you should note that <div> elements are supposed to be used where flow contents are expected. This means that they are NOT allowed to be placed inside <button> elements.
As per HTML5 spec (Which is at PR state right now):
Content model for element button:
Phrasing content, but there must be no interactive content descendant.
Therefore, a valid HTML could be like this:
<button>
why? <br>
are these centered vertically? <br>
And how to remove it?
</button>
Background
In an inline flow, inline-level elements (inline, inline-block) can be aligned vertically inside the parent by vertical-align property. Using that with a value other than baseline makes inline-level elements position somewhere other than the baseline of the parent (which is the default place).
The key point is that taller elements would affect the line box / baseline.
The Solution
First, in order to handle the position of the lines, we need to wrap them by a wrapper element like <span> as follows:
<button>
<span> <!-- Added wrapper -->
why? <br>
are these centered vertically? <br>
And how to remove it?
</span>
</button>
In cases that the parent - the <button> in this case - has an explicit height, by any chance if we could have a child element having the exact same height of the parent, we would be able to expand the height of the line box and surprisingly make our desired in-flow child - the nested <span> in this case - be aligned to the top vertically by vertical-align: top; declaration.
10.8 Line height calculations: 'vertical-align' property
This property affects the vertical positioning inside a line box of
the boxes generated by an inline-level element.
top
Align the top of the aligned subtree with the top of the line box.
EXAMPLE HERE
button { width: 100%; height: 200px; }
button > span {
display: inline-block;
vertical-align: top;
}
button:after {
content: "";
display: inline-block;
vertical-align: top;
height: 100%;
}
Last bot not least, if you'd like to use min-height rather than height for the button, you should use min-height: inherit; for the pseudo-element as well.
EXAMPLE HERE.
1 Chrome and Firefox also display the value of text inputs vertically at the middle while IE8 doesn't for instance.
Bootstrap adds padding above and below the button content (6 pixels). You can alter the padding amount with: button{padding:0px;} or button{padding-top:x; padding-bottom:y;} where x and y are whatever value you choose.
If you want to alter that button only give the button id="table" or something like that and then do: button#table{padding:0px;}
If you can avoid using vertical align you should as not all browsers support it.
I am trying to vertically center some text in a <span> element, in relation to a much larger <span> that is a sibling of the first one. Both are children of a containing parent <div> element.
HTML:
<div>
<span class="previewLabel">Preview:</span>
<span class="previewText">The quick brown fox jumps over the lazy dog.</span>
</div>
CSS:
.previewLabel {
display: inline-block;
line-height: 100%;
vertical-align: middle;
}
.previewText {
font-family: Verdana, Geneva, sans-serif;
font-size: 64px;
font-style: italic;
font-weight: bold;
}
JSFiddle: http://jsfiddle.net/5chXG/
As you can see, I already tried the vertical-align trick (with the line-height defined) that is described in this Q&A ("Text vertical align in a div") but it doesn't seem to work. I think the difference is that I can't use a static line-height value.
I can't use a px value for the line-height property because the .previewText span can change sizes dynamically. In the real code, there are controls on the page to change the font properties and JavaScript will adjust the CSS of the .previewText while you change things.
My Question:
How can make the "Preview:" text (.previewLabel) <span> be vertically aligned in the middle of the parent <div> element?
Edit / Clarification
I would like ALL of the text to behave as a single line of text normally would.
Wrapping should cause the big text to flow under the smaller text.
The smaller text should only be vertically aligned within the height of a single line of larger text, not multiple lines
Here is a visualization of what I am trying to achieve:
Adding vertical-align:middle to both .previewLabel and .previewText will work just fine.
And here is a fiddle for proof: http://jsfiddle.net/pavloschris/5chXG/4/
If you want the left one-line text to align to the first line of multi-line text on the right, you need to use vertical-align: baseline instead of vertical-align: middle along with display: table-cell. .previewLabel doesn't need a set line-height.
DEMO
.previewLabel {
vertical-align: baseline;
}
span {
display:table-cell;
}
I am trying to do a vertical align for my texts and images.
It seems the texts are aligned to top in my jsfiddle
text here --
| |
--
I want to have my text to be like
--
text here | |
--
http://jsfiddle.net/wjPxS/
I can't really change my image float right in css. Can anyone help me about it? Thanks so much!
Seeing as you know the height of your container you can just set the line-height the same as height to vertically align the text.
Demo
.div1 {
height: 20px;
line-height:20px;
}
updated jsFiddle
You need to apply
display: inline-block;
vertical-align: middle;
to both img and span. In jsfiddle I replaced span with `div'.
Though, this doesn't let you float the img to the right.
i got a question about how to center a text inside a div in html / css.
I have a h3 tag like this
<h3>Pacuraru Daniel Pacuraru Daniel</h3>
or
<h3>Pacuraru Daniel</h3>
and the css
h3 {
width: 100%;
height: 28px;
display: block;
}
If I have a name longer than 1 line, then the 2 lines of the text fit in the div, but if there is only 1 line, I want it to be vertically centered not aligned on top.
EDIT: i have this layout and i want in the both divs the text to be centered vertically
http://jsfiddle.net/shRRz/3/
I have found the way to do it. It seems i need to use this css to make it align like i wanted.
display: table-cell;
vertical-align: middle;
Thank you very much for the tips, people.