How do I get the \"x\" to be vertically-aligned in the middle of the span?
.foo {
height: 50px;
border: solid black 1px;
display: inline-block;
CSS vertical center image and text
I have Create one demo for vertical image center and text also i have test on firefox ,chrome,safari, internet explorer 9 and 8 too.
It is very short and easy css and html, Please check below code and you can find output on screenshort.
HTML
<div class="frame">
<img src="capabilities_icon1.png" alt="" />
</div>
CSS
.frame {
height: 160px;
width: 160px;
border: 1px solid red;
white-space: nowrap;
text-align: center; margin: 1em 0;
}
.frame::before {
display: inline-block;
height: 100%;
vertical-align: middle;
content:"";
}
img {
background: #3A6F9A;
vertical-align: middle;
}
Output enter image description here
The vertical-align css attribute doesn't do what you expect unfortunately. This article explains 2 ways to vertically align an element using css.
The flexbox way:
.foo {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
}
Use line-height:50px;
instead of height. That should do the trick ;)
This is the simplest way to do it if you need multiple lines. Wrap you span
'd text in another span
and specify its height with line-height
. The trick to multiple lines is resetting the inner span
's line-height
.
<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>
.textvalignmiddle {
line-height: /*set height*/;
}
.textvalignmiddle > span {
display: inline-block;
vertical-align: middle;
line-height: 1em; /*set line height back to normal*/
}
DEMO
Of course the outer span
could be a div
or whathaveyou
Set padding-top to be an appropriate value to push the x down, then subtract the value you have for padding-top from the height.