如何让"x"在跨度中间垂直对齐？
.foo {
height: 50px;
border: solid black 1px;
display: inline-block;
vertical-align: middle;
}
x
Sindre Sorhu.. 200
使用line-height:50px;而不是高度.这应该够了吧 ;)
使用line-height:50px;而不是高度.这应该够了吧 ;)
请注意,line-height如果span由于没有足够的空间而导致断行,则该方法会失败.在这种情况下,您将有两条线,其间隙与属性中指定的N像素的高度相同.
当我想在右侧显示带有垂直居中文本的图像时,我坚持使用它在响应式Web应用程序中工作.作为基础,我使用Eric Nickus和Felipe Tadeo建议的方法.
如果你想实现:
还有这个:
.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;
}
This is a centered sentence next to an image
如果您需要多行,这是最简单的方法.将你span的文字包裹在另一个文本中span并用其指定其高度line-height.多行的诀窍是重置内部span的line-height.
YOUR TEXT HERE
.textvalignmiddle {
line-height: /*set height*/;
}
.textvalignmiddle > span {
display: inline-block;
vertical-align: middle;
line-height: 1em; /*set line height back to normal*/
}
DEMO
当然外面span可能是a div或whathaveyou
flexbox方式:
.foo {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
}
我需要这个链接,所以我用一个标签和一个div包装了span,然后将span标签本身居中
HTML
CSS
.tester{
display: inline-block;
width: 9em;
height: 3em;
text-align: center;
}
.tester>span{
position: relative;
top: 25%;
}
CSS垂直居中图片和文字
我已经为垂直图像中心和文本创建了一个演示，我也对Firefox，chrome，safari，Internet Explorer 9和8进行了测试。
这是非常简短的CSS和html，请检查以下代码，您可以在screenshort上找到输出。
的HTML
的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;
}
输出 在这里输入图像描述
京公网安备 11010802040832号 | 京ICP备19059560号-6 