垂直对齐图像旁边的文本？

为什么不垂直对齐：中间工作？然而，垂直对齐：顶部确实有效。

跨度{垂直对齐：中间；}＜div＞<img src=“https://via.placeholder.com/30“alt=”小img“/><span>不起作用</span></div>

当前回答

<!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>

2020-06-06 18:45:04

其他回答

基本上，你必须降到CSS3。

-moz-box-align: center;
-webkit-box-align: center;

2011-11-29 18:24:13

不知道为什么它不在导航浏览器上显示，但我通常在尝试显示带有图像和居中文本的标题时使用这样的代码段，希望它有所帮助！

https://output.jsbin.com/jeqorahupo

            <hgroup style="display:block; text-align:center;  vertical-align:middle;  margin:inherit auto; padding:inherit auto; max-height:inherit">

            <header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">

            <image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
                    http://lipsum.org</header>
                    </hgroup>

2019-11-05 05:21:33

第二部分{显示：柔性；对齐项目：居中；}＜div＞<img src=“http://lorempixel.com/30/30/“alt=”小img“/><span>它起作用了</span></div>

2021-08-16 06:44:30

可以使用display属性将图像设置为内联元素

＜div＞<img style=“vertical align:middle；display:inline；”src=“https://placehold.it/60x60"><span style=“vertical align:middle；display:inline；”>有效</span></div>

2017-01-30 14:54:55

我同意，这可能令人困惑。尝试利用表格功能。我使用这个简单的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; }

请注意，您必须设置图像和表格容器的样式并调整其大小，以使其按您的需要工作。享受

2017-07-06 02:12:31

垂直对齐图像旁边的文本？

推荐文章

最新文章

标签