I am facing an interesting issue with Bootstrap3 where the label ("Name") seems to be aligned at the bottom of the <h2> tag (see the blue box in the image (highlighted by the Chrome dev tool).
(From the Bootstrap 3 documentation putting labels inside headings seem to be a suggested way)
I can't figure out how to vertically align the label in center of <h2>. vertical-align doesnt work on h2 it seems. This answer to another SO post suggests changing the line-height but that doesn't seem to be an intuitive approach since it increases the padding on both sides of h2 (basically increasing the size of the h2 block).
This label is inside a table cell whose code is as follows:
<td class="text-right"><h2><span class="label label-default vcenter">Name</span></h2></td>
(vcenter is the class I am trying to use to vertically align)
It looks like all solutions teach you how to vertically center your .label in the <td>. However, none of them takes into consideration the difference between top and bottom margins on the h2 element.
Basically, you're trying to vertically center with something that's not vertically centered. The only way to account for it is to raise the label with half the margins difference, which should be .5rem. So this will most likely to the job:
h2 > .label {
position: relative;
top: -.5rem;
}
If it doesn't, you have stronger CSS rules applying and I'll need to take a look at them. Feel free to change -.5rem to whatever works for you (in rem or px).
Another approach is to use any vertical centering technique and make the top and bottom margins equal on td>h2 elements:
td>h2 { margin-top: 1rem; margin-bottom: 1rem; }
After this, most of the other answers will work.
You can add display: flex to the headline tag and then center its children vertically:
h2 {
display: flex;
align-items: center;
/* Just for presentation */
background: #ececec;
height: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<td class="text-right">
<h2><span class="label label-default vcenter">Name</span></h2>
</td>
add valign middle for td
<td valign="middle" class="text-right"><h2><span class="label label-default vcenter">Name</span></h2></td>
or
add this css
.table tbody>tr>td.vert-align
{
vertical-align: middle;
}
<td class="text-right vert-align"><h2><span class="label label-default vcenter">Name</span></h2></td>
Related
I'm trying to get a vertical alignment similar to baseline, but at the first line of text rather than the last. Neither top nor text-top gets the alignment right. Any ideas? Thanks!
edit: This assumes that the font size is the same in the elements being aligned. See comment below by #FelipeAls on the accepted answer.
edit: now with code sample and picture:
What I'm trying to do is vertically align the text in several inline-block elements so that their baselines are all in the same position. I'd rather not do something like nudging things using margins and padding, because I find whenever I do that, I ended up playing whack-a-mole with the different browsers.
HTML:
<div class="foo">
<span>one</span>
<span>two two two two</span>
<span>three three three three three three three three three</span>
<button type="button">action</button>
</div>
<div class="bar">
<span>one</span>
<span>two two two two</span>
<span>three three three three three three three three three</span>
<button type="button">action</button>
</div>
CSS:
body {
font-family: sans-serif;
font-size: 12px;
}
button {
font-family: inherit;
font-size: inherit;
}
div {
position: relative;
width: 500px;
text-align: center;
}
div.foo, div.bar {
margin-bottom: 2em;
}
div span {
text-align: center;
}
div.foo span {
display: inline-block;
width: 50px;
vertical-align: top;
}
div.bar span {
display: inline-block;
width: 50px;
vertical-align: baseline;
}
div button {
display: inline-block;
width: 125px;
}
See http://jsfiddle.net/don01001100/3t8v5L1j/3/.
I'm afraid that you can only do that with CSS box-model, such as margin, padding.
This is because the different inline-block elements are aligned at the baseline, but they have different padding / margin settings, so their text is aligned slightly off vertically. If you change the padding and margin of the <button>s and the <span>s to be the same, then it should work.
EDIT1
Actually, now that I think of it, you might be able to manually set values to vertical-align in pixels. Experiment with it (including negative values) to see what you want. It will depend on the paddings and margins of the <span>s and <div>s.
EDIT2
Actually, vertical-align: text-top works pretty well for me:
I want to gain a deeper understanding of how line-height works, in particular with centering text vertically within a fixed height element. In the example link below, you can see that setting the line-height to be equal to the container's height will center items as long as the items are all of the same size. When you put two different sized spans in, then the larger one will be centered, while the other will not be. I am at a loss to explain this, since both the large and small elements work separately. How can I accomplish having a large and small span to be centered (using line-height)? (and why is this behavior happening in the first place?)
.header {
background: grey;
width: 100%;
height: 65px;
}
.big, .small {
line-height: 65px;
}
.big {
font-size: 1.5em;
}
.
<div class="header">
<span class="big">A</span>
<span class="small">B</span>
</div>
<br/>
<div class="header">
<span class="small">A</span>
<span class="small">B</span>
</div>
<br/>
<div class="header">
<span class="big">A</span>
<span class="big">B</span>
</div>
JS Fiddle Example
This happens, because default vertical-align is baseline. If you switch it to vertical-align:middle you get the expected behaviour.
Edit for clarification:
As span's are inline elements they share the same baseline, regardless of the font size you are using. Vertical alignment of text is baseline initially, but by setting it to middle, you force these inline elements to align vertically centered.
More info on vertical align here: https://developer.mozilla.org/en/docs/Web/CSS/vertical-align
You need vertical-align: middle; . default value is baseline.
.big, .small {
line-height: 150px;
vertical-align: middle;
}
JSFiddle
inline-block elements using overflow: hidden position themselves so their bottom margin is the baseline. From http://www.w3.org/TR/CSS2/visudet.html#leading:
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.
In practice this means these elements are shifted up unexpectedly; e.g., inside a <td> the element will not be vertically centered. A simpler example:
div {
border: 1px solid red;
text-decoration: underline;
}
.ib {
display: inline-block;
}
.h {
overflow: hidden;
}
<div>
<div class="ib">Visible</div>ABgjh</div><br>
<div>
<div class="ib h">Hidden</div>ABgjh</div>
the div with overflow: hidden doesn't share the same baseline as its surrounding line.
I'm looking for a simple way to make that div align itself as if it was following the normal rules for inline-block elements. Basically I want to write a custom element that "just works" whether its consumer applies a vertical-align style, or places it inside a <td>, etc.
This table has an example where I want the element to vertically center itself but instead it pushes itself up (and the rest of the line down).
This fiddle has more examples showing how different pairings of vertical-align behave unexpectedly when one element is display: inline-block; overflow: hidden.
To be clear, this question is asking whether a <div style="overflow: hidden"> can be wrapped in such a way that it can be treated as a regular inline-block element, positioning itself intelligently, without JS or font-based pixel adjustments. I'd want to be able to apply styling to the final component in order to position or align it as I please, as if it were a regular inline-block element.
I am not sure what browsers you are looking to support but if you wrap your DIV with display: flex; you wont get that vertical offset. You can see it here:
div {
border: 1px solid red;
text-decoration: underline;
}
.ib {
display: inline-block;
}
.h {
overflow: hidden;
}
.flex {
display: flex;
}
<div>
<div class="ib">Visible</div>
ABgjh
</div>
<div class="flex">
<div class="ib h">Hidden</div>
ABgjh
</div>
I normally don't use flexbox because of the lack of browser support but perhaps this is the simple solution you're looking for. Hope that helps.
I created a DIV without fixed with - just let it take 100% of its parent. Now I want to use a dash as a centered element. The Dash should always appear exactly in the middle of the div. There should be not fix-sized elements around that dash who kind of float around it.
Is there any way to do it ?
HTML
<div>
<span>Element #1</span>
<span class="centered">-</span>
<span>Element #2</span>
</div>
I tried to set the centered Element to Absolute which will always keep it in the middle of the DIV (with text-align center), BUT then I cant let the items around it. Element #1 could contain 20 signs why Element #2 could only be 3 characters big.
Any ideas are appriciated, besides trying to fix it with a classic table or using JS.
Pardon if I misunderstood your question, but what about CSS tables? Using text-align in the sample below isn't mandatory, it just centers the example texts.
.t {
background: thistle;
display: table;
width: 100%;
text-align: center;
}
.t > .centered {
width: 1px; /*Will resize*/
}
.t > span {
display: table-cell;
width: 50%;
}
<div class="t">
<span>Element with longer content #1</span>
<span class="centered">-</span>
<span>Element #2</span>
</div>
It is working with this way
<td align="center">
But I want to use CSS class.
I defined class like this way but no luck
td
{
vertical-align: middle;
text-align: center;
margin-left: auto;
margin-right: auto;
align: center;
}
Vertical align is working and text align is working for text. But it does not align div inside td with this way. I want to align div inside td.
div { margin: auto; }
This will center your div.
Div by itself is a blockelement. Therefor you need to define the style to the div how to behave.
I cannot help you much without a small (possibly reduced) snippit of the problem. If the problem is what I think it is then it's because a div by default takes up 100% width, and as such cannot be aligned.
What you may be after is to align the inline elements inside the div (such as text) with text-align:center; otherwise you may consider setting the div to display:inline-block;
If you do go down the inline-block route then you may have to consider my favorite IE hack.
width:100px;
display:inline-block;
zoom:1; //IE only
*display:inline; //IE only
Happy Coding :)