logo标签列表

如何在一个 div 中垂直居中一个 <span> 元素？

htmlcsscenter
282

这段代码：

<div 
  id="theMainDiv"
  style="
    border:solid 1px gray;
    cursor:text;
    width:400px;
    padding:0px;"
>
  <span 
    id="tag1_outer" 
    style="
      background:#e2e6f0;
      padding-right:4px;
      padding-left:4px;
      border:solid 1px #9daccc;
      font:normal 11px arial;
      color:#3c3c3c"
  >as</span>
</div>

目前渲染的结果是，这个标签位于

标签的左下角。

不带行高的解决方案，使用flex： id="theMainDiv" style=" border:solid 1px gray; cursor:text; width:400px; padding:0px; display:flex; align-content: middle;" - Sanid Sa
5个回答
216
请参阅我的文章，详见理解垂直对齐。在讨论结束时，有多种技术可实现您所需的效果。

(超简要概述：将子元素的行高设置为容器的高度，或在容器上设置定位并将子元素绝对定位于top:50%，并使用margin-top:-YYYpx，其中YYY是已知子元素高度的一半。)

10
@Blender 嘿，虽然这里提到了第三种选择：display:table-cell; vertical-align:middle（以及一个 display:table-row 的父元素）。 :) 但是不要担心，我可以肯定的说，我绝对不会主张使用 HTML 表格元素进行布局。请放心。 - Phrogz
1
那么如果你不想使用固定高度来完成此任务，就没有其他方法吗？ - Ryan Lundy
2
@Kyralessa 不，如果您的内容没有固定的高度，则存在一些尚未列在我的页面中的技术。例如，请参见：http://css-tricks.com/centering-in-the-unknown/ - Phrogz
6
@Phrogz - 你应该在你的回答中加上http://css-tricks.com/centering-in-the-unknown/中的最后一个选项。它非常简洁，而且支持ie8+！ - plainjimbo
7
如果YYY是未知的呢？ - Shimmy Weitzhandler
显示剩余4条评论
208
在你的父级 DIV 上添加：
display:table;

并在您的子元素中添加

 display:table-cell;
 vertical-align:middle;
1
这个可以运行，但是有没有一种简单的方法来使子元素在父元素中水平居中呢？由于子元素的显示不再是inline-block，所以父元素的“text-align:center;”css不再起作用。 - jnel899
75

单行跨度的快速答案

将子元素（在本例中为）的line-height与父元素<div>的高度相同。

<div class="parent">
  <span class="child">Yes mom, I did my homework lol</span>
</div>

然后您应该添加CSS规则

.parent { height: 20px; }
.child { line-height: 20px; vertical-align: middle; }


或者您可以使用子选择器来定位它

.parent { height: 20px; }
.parent > span { line-height: 20px; vertical-align: middle; }

我自己使用这个的背景

我遇到了一个类似的问题，需要在移动菜单中垂直居中项目。我将div和span设置为相同的行高。请注意，这是为Meteor项目而不是使用内联CSS；）

HTML

<div class="international">        
  <span class="intlFlag">
    {{flag}}        
  </span>

  <span class="intlCurrent">
    {{country}}
  </span>

  <span class="intlButton">
    <i class="fa fa-globe"></i>
  </span> 
</div>

CSS（在一个div中选择多个span的选项）

.international {
  height: 42px;
}

.international > span {
  line-height: 42px;
}

如果我只有一个，那么我可以直接将CSS规则添加到那个中。

CSS（适用于一个特定的）

.intlFlag { line-height: 42px; }
这是我的显示方式。 输入图像描述
2
高质量子div示例文本点赞。 - brandones
1
这只在文本不超过多行的情况下有效。 - Guillaume
@Guillaume 是的，它真的在开头的句子中提到了。 - JGallardo
42

与类似问题 相同，使用 display: inline-block 与占位元素将 span 垂直居中于块级元素内部：

html, body, #container, #placeholder { height: 100%; }

#content, #placeholder { display:inline-block; vertical-align: middle; }
<!doctype html>
<html lang="en">
  <head>
  </head>

  <body>
    <div id="container">
      <span id="content">
        Content
      </span>
      <span id="placeholder"></span>
    </div>
  </body>
</html>

垂直对齐仅适用于内联元素或表格单元格，因此在垂直居中块级元素时，请与 display:inline-block 或 display:table-cell 结合使用，并在其父元素中添加 display:table。

参考资料：

CSS 水平和垂直居中

只要 #content 没有被包装起来，这个解决方案就能正常工作。 - Dawid Pytel
1
在父级 div 中添加一个高度，比如 50px。在子级 span 中，添加 line-height: 50px; 现在 span 中的文本将垂直居中。这对我很有效。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接