代码:
<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; }
下面是它对我的显示
其他回答
给父div添加一个高度50px。在子跨度中，添加line-height: 50px; 现在跨度中的文本将垂直居中。这对我很管用。
在您的父DIV添加
display:table;
然后在子元素中添加
display:table-cell;
vertical-align:middle;
快速回答单线跨度
使子对象(在本例中为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; }
下面是它对我的显示
请参阅我关于理解垂直对齐的文章。有多种技巧可以在讨论结束时达到你想要的效果。
(超简短的总结:要么设置子对象的行高等于容器的高度，要么在容器上设置定位，并将子对象绝对定位在顶部:50%，margin-top:-YYYpx, YYY是子对象已知高度的一半。)
在类似的问题中，使用带有占位符元素的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水平和垂直居中
