一尘不染

如何在div内部垂直居中?

html

编码:

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


阅读 274

收藏
2020-05-10

共1个答案

一尘不染

请参阅我关于理解垂直对齐的文章。在讨论的最后,有多种技术可以实现您想要的。

(超简短摘要:或者将子级的行高设置为等于容器的高度,或者将子级的高度设置为在容器上并将子级绝对定位为,top:50%其中margin-top:-YYYpxYYY为子级已知高度的一半。)

2020-05-10