1. ホーム
  2. ハイパーリンク

[解決済み] [Solved] How to vertically center a <span> inside a div? [duplicate]

2022-04-04 15:04:21

Question

The code:

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

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

解決方法は?

の記事をご覧ください。 垂直方向のアライメントを理解する . あなたが望むことを実現するためのテクニックは、議論の末に複数存在します。

(超簡単にまとめると、子のラインハイトをコンテナの高さと同じにするか、コンテナに位置決めを設定し、子の位置を絶対に top:50%margin-top:-YYYpx YYYは子供の既知の身長の半分です)。