如何在 div 内垂直居中 <span>? [复制]

Posted

技术标签:

【中文标题】如何在 div 内垂直居中 <span>? [复制]【英文标题】:How to vertically center a <span> inside a div? [duplicate] 【发布时间】:2011-05-20 10:18:34 【问题描述】:

代码:

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

现在渲染时,span 对齐 div 的左下角。

【问题讨论】:

【参考方案1】:

请参阅我在understanding vertical alignment 上的文章。在讨论结束时,有多种技术可以实现您想要的。

(超短总结:要么将子元素的行高设置为容器的高度,要么在容器上设置定位并将子元素绝对定位在top:50%margin-top:-YYYpx, YYY是孩子已知身高的一半。)

【讨论】:

@Blender Heh,尽管其中引用了第三个选项:display:table-cell; vertical-align:middle(以及 display:table-row 父级)。 :) 但是不,你可以肯定我会never advocate using html table elements for layout。 那么如果你想在没有固定高度的情况下做到这一点,没有办法做到吗? @Kyralessa 不,如果您没有固定的内容高度,则存在一些尚未在我的页面中列出的技术。例如,请参阅:css-tricks.com/centering-in-the-unknown @Phrogz - 您应该将css-tricks.com/centering-in-the-unknown 中的最后一个选项添加到您的答案中。太干净了,而且 ie8+! 如果YYY 未知怎么办??【参考方案2】:

在你的父 DIV 添加

display:table;

并在您的子元素处添加

 display:table-cell;
 vertical-align:middle;

【讨论】:

这行得通,但是是否有一种简单的方法也可以将父元素中的子元素水平居中?由于孩子的显示不再是内联块,父母的“文本对齐:中心;” CSS 不再有效。【参考方案3】:

单行跨度快速解答

使子级(在本例中为跨度)line-height 与父级 &lt;div&gt; 的高度相同

<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。请注意,这是针对流星项目的,因此不使用内联 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 中多个跨度的选项)

.international 
  height: 42px;


.international > span 
  line-height: 42px;

在这种情况下,如果我只有一个跨度,我可以将 CSS 规则直接添加到该跨度。

CSS(一个特定跨度的选项)

.intlFlag  line-height: 42px; 

这是我的显示方式

【讨论】:

为高质量的子 div 示例文本点赞。【参考方案4】:

As in a similar question,使用带有占位符元素的display: inline-block 将块元素内的跨度垂直居中:

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>

垂直对齐仅适用于inline elements or table cells,因此在垂直居中块元素时将其与display:inline-blockdisplay:table-cell 一起使用,并带有display:table 父级。

参考资料:

CSS Horizontal and Vertical Centering

【讨论】:

只要不包装#content,该解决方案就可以工作【参考方案5】:

向父 div 添加一个高度,例如 50 像素。在子跨度中,添加 line-height: 50px; 现在跨度中的文本将垂直居中。这对我有用。

【讨论】:

以上是关于如何在 div 内垂直居中 <span>? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

如何实现div内的span垂直的定位?

怎么让span在div中垂直居中

垂直居中 <span> 文本,位于更大的 <span> 旁边,都在 <div> 内

怎么让span在div中垂直居中

span标签文字垂直居中

css,如何让span中的两个span垂直居中排列。