如何在图片旁垂直对齐文本？

Question

如何在图片旁垂直对齐文本？

2247

为什么vertical-align: middle不起作用？但是，vertical-align: top却可以起作用。

span{
  vertical-align: middle;
}

<div>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span>Doesn't work.</span>
</div>

- sam

26个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Soumik mahato · Answer 1

使用align-items: center;的display:flex是垂直对齐项目的最佳方式。

div {
  display: flex;
  align-items: center;
}

<div>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span>it works.</span>
</div>

- CSSBurner · Answer 2

在2022年，使用近96%的无前缀浏览器支持，我很惊讶没有人提出使用grid布局。

在这个JSFiddle中，只需要3行就可以实现OP的目标（但为了比较提供了多个对齐方式）。

div {
    display: grid;
    grid-template-columns: min-content max-content;
    align-items: center
}

另一个 UI 的美观之处在于可选使用 gap 属性，它可以调节父级 grid container (div) 中每个 grid-item 之间的空间。

grid 布局的优势

轻松实现网格项的垂直和水平对齐
调节网格项之间的空间
任何大小的图像（使用 min-content）和文本长度（使用 max-content 或换行（未在 fiddle 中显示）使用 min-content）都可以工作 - 不需要在 CSS 中硬编码图像尺寸（两种用法在 JSFiddle 中演示）
现代化的方法

grid布局的缺点

老旧浏览器支持更具挑战性
grid布局通常需要更有经验的开发人员才能正确实现 - 不像block/inline-block显示那样简单

- Alireza · Answer 3

首先，内联CSS根本不被推荐使用，它会让你的HTML变得混乱不堪。

For aligning image and span, you can simply do vertical-align:middle.

.align-middle {
  vertical-align: middle;
}

<div>
  <img class="align-middle" src="https://istack.dev59.com/ymxaR.webp">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>

- Jean G.T · Answer 4

不确定为什么它在您的导航浏览器上无法呈现，但是当我尝试显示带有图像和居中文本的标题时，通常会使用类似于这样的片段，希望能帮到您！

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>

- Pradeep · Answer 5

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

- strager · Answer 6

你可能想要这个：

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

正如其他人建议的那样，在图像上尝试使用vertical-align：

<div>
   <img style="width:30px; height:30px; vertical-align:middle;">
   <span>Didn't work.</span>
</div>

CSS并不讨厌。你只是没有阅读文档。;P