如何垂直居中< span>里面一个div？ [英] How to vertically center a <span> inside a div?

问题描述

代码：

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

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

As it renders now, the span is align the bottom-left corner of the div.

推荐答案

查看我在上的文章了解垂直对齐。在讨论结束时，有多种技巧可以完成你想要的。

See my article on understanding vertical alignment. There are multiple techniques to accomplish what you want at the end of the discussion.

（超简短摘要：设置子元素的行高到容器的高度，或设置在容器上的位置，并且将 top：50％与 margin-top：-YYYpx ，YYY是孩子已知身高的一半。）

(Super-short summary: either set the line-height of the child equal to the height of the container, or set positioning on the container and absolutely position the child at top:50% with margin-top:-YYYpx, YYY being half the known height of the child.)

这篇关于如何垂直居中< span>里面一个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！