为什么不垂直对齐:中间工作?然而,垂直对齐:顶部确实有效。
跨度{垂直对齐:中间;}<div><img src=“https://via.placeholder.com/30“alt=”小img“/><span>不起作用</span></div>
为什么不垂直对齐:中间工作?然而,垂直对齐:顶部确实有效。
跨度{垂直对齐:中间;}<div><img src=“https://via.placeholder.com/30“alt=”小img“/><span>不起作用</span></div>
当前回答
显示带对齐项目的柔性:居中;是垂直对齐项目的最佳方式
第二部分{显示:柔性;对齐项目:居中;}<div><img src=“https://via.placeholder.com/30“alt=”小img“/><span>它起作用</span></div>
其他回答
接受答案中使用的技术仅适用于单行文本(demo),而不适用于多行文本(demo),如这里所述。
如果有人需要将多行文本垂直居中放置到图像中,以下是几种方法(方法1和方法2受此CSS技巧文章启发)
方法#1:CSS表格(FIDDLE)(IE8+(犬))
CSS:
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
方法#2:容器上的伪元素(FIDDLE)(IE8+)
CSS:
div {
height: 200px; /* height of image */
}
div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
img {
position: absolute;
}
span {
display: inline-block;
vertical-align: middle;
margin-left: 200px; /* width of image */
}
方法3:Flexbox(FIDDLE)(犬用)
CSS(上面的fiddle包含供应商前缀):
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}
background:url(../images/red_bullet.jpg) left 3px no-repeat;
我通常用3px代替top。通过增加/减少该值,可以将图像更改为所需的高度。
将div更改为flex容器:
div { display: flex; }
方法1:
div { align-items: center; }
DEMO
方法2:
div * { margin: auto 0; }
DEMO
尝试在img上使用不同的宽度和高度值,在跨距上尝试不同的字体大小值,您将看到它们始终保持在容器的中间。
<!DOCTYPE html>
<html>
<head>
<style>
.block-system-branding-block {
flex: 0 1 40%;
}
@media screen and (min-width: 48em) {
.block-system-branding-block {
flex: 0 1 420px;
margin: 2.5rem 0;
text-align: left;
}
}
.flex-containerrow {
display: flex;
}
.flex-containerrow > div {
justify-content: center;
align-items: center;
}
.flex-containercolumn {
display: flex;
flex-direction: column;
}
.flex-containercolumn > div {
width: 300px;
margin: 10px;
text-align: left;
line-height: 20px;
font-size: 16px;
}
.flex-containercolumn > site-slogan {font-size: 12px;}
.flex-containercolumn > div > span{ font-size: 12px;}
</style>
</head>
<body>
<div id="block-umami-branding" class="block-system block-
system-branding-block">
<div class="flex-containerrow">
<div>
<a href="/" rel="home" class="site-logo">
<img src="https://placehold.it/120x120" alt="Home">
</a>
</div><div class="flex-containerrow"><div class="flex-containercolumn">
<div class="site-name ">
<a href="/" title="Home" rel="home">This is my sitename</a>
</div>
<div class="site-slogan "><span>Department of Test | Ministry of Test |
TGoII</span></div>
</div></div>
</div>
</div>
</body>
</html>
我同意,这可能令人困惑。尝试利用表格功能。我使用这个简单的CSS技巧将情态动词放在网页的中心。它具有大型浏览器支持:
<div class="table">
<div class="cell">
<img src="..." alt="..." />
<span>It works now</span>
</div>
</div>
和CSS部分:
.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }
请注意,您必须设置图像和表格容器的样式并调整其大小,以使其按您的需要工作。享受