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;
vertical-align: middle;
}
<span class="foo">
x
</span>
Use line-height:50px;
instead of height. That should do the trick ;)
Be aware that the line-height
approach fails if you have a long sentence in the span
which breaks the line because there's not enough space. In this case, you would have two lines with a gap with the height of the N pixels specified in the property.
I stuck into it when I wanted to show an image with vertically centered text on its right side which works in a responsive web application. As a base I use the approach suggested by Eric Nickus and Felipe Tadeo.
If you want to achieve:
and this:
.container { background: url( "https://i.imgur.com/tAlPtC4.jpg" ) no-repeat; display: inline-block; background-size: 40px 40px; /* image's size */ height: 40px; /* image's height */ padding-left: 50px; /* image's width plus 10 px (margin between text and image) */ } .container span { height: 40px; /* image's height */ display: table-cell; vertical-align: middle; }
<span class="container"> <span>This is a centered sentence next to an image</span> </span>
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*/
}
Of course the outer span
could be a div
or whathaveyou
The flexbox way:
.foo {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
}
I needed this for links, so I wrapped the span with an a-tag and a div, then centered the span tag itself
HTML
<div>
<a class="tester" href="#">
<span>Home</span>
</a>
</div>
CSS
.tester{
display: inline-block;
width: 9em;
height: 3em;
text-align: center;
}
.tester>span{
position: relative;
top: 25%;
}
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
this works for me (Keltex said the same)
.foo {
height: 50px;
...
}
.foo span{
vertical-align: middle;
}
<span class="foo"> <span>middle!</span></span>
The vertical-align css attribute doesn't do what you expect unfortunately. This article explains 2 ways to vertically align an element using css.
将padding-top设置为适当的值以向下推x,然后从高度中减去padding-top的值。
Just giving an alternative, in case you encapsulate your element in a flexible container (eg: display: flex):
align-self: center;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.