如何垂直中心<span>在一个div?

代码:

<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的左下角。

当前回答

快速回答单线跨度

使子对象(在本例中为span)的行高与父对象<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在相同的行高内。注意，这是一个流星项目，因此不使用内联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;
}

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

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

.intlFlag { line-height: 42px; }

下面是它对我的显示

2014-01-31 00:17:16

其他回答

给父div添加一个高度50px。在子跨度中，添加line-height: 50px; 现在跨度中的文本将垂直居中。这对我很管用。

2013-09-09 22:18:45

请参阅我关于理解垂直对齐的文章。有多种技巧可以在讨论结束时达到你想要的效果。

(超简短的总结:要么设置子对象的行高等于容器的高度，要么在容器上设置定位，并将子对象绝对定位在顶部:50%，margin-top:-YYYpx, YYY是子对象已知高度的一半。)

2010-12-05 04:07:21

在类似的问题中，使用带有占位符元素的display: inline-block将块元素内部的span垂直居中:

Html, body， #container， #占位符{高度:100%;｝ #内容，#占位符{显示:inline-block;vertical-align:中间;｝ <！doctype html > < html lang =“en”> < >头 > < /头身体< > < div id = "容器" > < span id = "内容" > 内容 < / span > < span id = "占位符“> < / span > < / div > 身体< / > < / html >

垂直对齐只应用于内联元素或表格单元格，所以当垂直居中块元素时，它与display:inline-block或带有display:table父项的display:table-cell一起使用。

引用:

CSS水平和垂直居中

2012-06-22 18:19:23

在您的父DIV添加

display:table;

然后在子元素中添加

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

2012-12-12 09:08:34