如何垂直居中一个div内的<span>？
代码：
<div style=" border:solid 1px gray; cursor:text; width:400px; padding:0px;" id="theMainDiv"> <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> 当它现在渲染时，跨度alignmentdiv的左下angular。
看到我的文章了解垂直alignment 。 在讨论结束时，有多种技术可以完成你想要的任务。
（超简短摘要：或者将孩子的行高设置为等于容器的高度，或者将容器的位置设置为绝对位置，将孩子放在top:50%位置top:50%使用margin-top:-YYYpx top:50% margin-top:-YYYpx ，YYY为一半孩子的已知身高。）
在你的父母DIV添加
display:table;
并在你的子元素添加
display:table-cell; vertical-align:middle;
就像在类似的问题中一样 ，使用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>
单行跨度的快速答案
让孩子（在这种情况下跨度）与父母的<div>的高度相同的line-height高
<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; }
或者你可以用一个子select器来定位它
.parent { height: 20px; } .parent > span { line-height: 20px; vertical-align: middle; }
我自己使用这个背景
我遇到了类似的问题，我需要在移动菜单中垂直放置项目。 我做了div和跨度在同一行高度。 请注意，这是一个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中有多个跨度的选项）
.international { height: 42px; } .international > span { line-height: 42px; }
在这种情况下，如果我只有一个跨度，我可以将CSS规则直接添加到该跨度。
CSS （一个特定跨度的选项）
.intlFlag { line-height: 42px; }
这是它如何显示给我
给父母的div添加一个高度说50px。 在子跨度中，添加line-height：50px; 现在跨度中的文本将垂直居中。 这对我有效。
