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

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

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

当前回答

2022年，浏览器支持率达到96%，我很惊讶没有人建议使用网格布局。

在本JSFiddle中，3行是实现OP目标所需的全部内容（但提供了多条路线以供比较）：

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

一个额外的UI细节将包括可选的gap属性的使用，该属性允许调整父网格容器（div）中每个网格项之间的空间。

网格布局的优势

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

网格布局的缺点

较旧的浏览器支持更具挑战性网格布局通常需要更有经验的开发人员来正确实现，而不是像块/内联块显示那样简单

2022-02-28 03:18:08

其他回答

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

实际上，在这种情况下非常简单：对图像应用垂直对齐。因为它都在一行中，所以它实际上是您想要对齐的图像，而不是文本。

＜div＞<img style=“vertical align:middle”src=“https://via.placeholder.com/60x60“alt=”显示文本60 x 60的灰色图像“><span style=“”>有效</span></div>

在FF3中测试。

现在，您可以将flexbox用于这种类型的布局。

.box格式{显示：柔性；对齐项目：居中；}<div class=“box”><img src=“https://via.placeholder.com/60x60"><span style=“”>有效</span></div>

2009-01-28 21:10:50

显示带对齐项目的柔性：居中；是垂直对齐项目的最佳方式

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

2021-10-10 16:26:13

以下是一些简单的垂直对齐技术：

单行垂直对齐：中间

这很简单：将文本元素的行高度设置为等于容器的行高度

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

多行垂直对齐：底部

相对于容器绝对定位内部div

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

多行垂直对齐：中间

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

如果您必须支持IE的早期版本<=7

为了让它在所有方面都能正常工作，你必须稍微修改一下CSS。幸运的是，有一个IE bug对我们有利。在容器上设置top:50%，在内部div上设置top:-50%，可以获得相同的结果。我们可以使用IE不支持的另一个功能将两者结合起来：高级CSS选择器。

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

可变容器高度垂直对齐：中间

此解决方案需要比其他解决方案稍微更现代的浏览器，因为它使用了transform:translateY属性。(http://caniuse.com/#feat=transforms2d)

无论父元素的高度如何，将以下3行CSS应用于元素将在其父元素中垂直居中：

position: relative;
top: 50%;
transform: translateY(-50%);

2009-01-28 21:45:03

接受答案中使用的技术仅适用于单行文本（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 */
}

2013-12-24 21:06:14

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

推荐文章

最新文章

标签