Question

代码：

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

现在渲染时，跨度对齐div的左下角。

Answer 1

请参阅understanding vertical alignment上的文章。在讨论结束时，有多种技术可以实现您的目标。

（超简短摘要：要么设置子项的行高等于容器的高度，要么在容器上设置定位，并将子项绝对定位在top:50% {{1} ，YYY是孩子已知身高的一半。）

Answer 2

在您的父DIV添加

display:table;

并在您的子元素添加

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

Answer 3

As in a similar question，使用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>

垂直对齐仅适用于inline elements or table cells，因此在垂直居中块元素时，请将其与display:inline-block或display:table-cell一起使用display:table父级。

<强>参考文献：

CSS Horizontal and Vertical Centering

Answer 4

单行跨度的快速回答

让孩子（在这种情况下是一个范围）与父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并跨越了相同的线高。请注意，这是针对流星项目的，因此不使用内联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; }

这是我为我显示的方式

enter image description here

Answer 5

向父div添加一个高度为50px。在子跨度中，添加行高：50px; 现在跨度中的文本将垂直居中。这对我有用。

如何在div内垂直居中<span>？</span>

5 个答案: