web-dev-qa-db-ja.com

divの内側で<span>を垂直方向に中央揃えする方法は？

コード：

<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の左下隅に揃います。

htmlcsscenter
192
Babiker

垂直方向の配置を理解する に関する私の記事を参照してください。議論の終わりにあなたが望むものを達成するための複数のテクニックがあります。

（超簡単な要約：子の行の高さをコンテナの高さと同じに設定するか、コンテナ上の位置を設定して子をtop:50%に絶対配置します。 margin-top:-YYYpx、YYYは子供の身長の半分です。）

179
Phrogz

あなたの親のDIVで追加

display:table;

そしてあなたの子供の要素で追加

 display:table-cell;
 vertical-align:middle;
138
Otto Kanellis

同様の質問のように 、ブロックエレメント内のスパンを垂直方向に中央に配置するには、プレースホルダーエレメントで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>

垂直方向の配置は、 インライン要素またはテーブルセル にのみ適用されるため、ブロック要素を垂直方向に中央揃えする場合は、display:inline-blockまたはdisplay:table-cell親とともにdisplay:table親とともに使用します。

参照：

CSS水平および垂直センタリング

36
Paul Sweatte

単線スパンのクイック回答

子（この場合はスパン）を親のline-heightの高さと同じ<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とスパンを同じ行の高さの内側に作成しました。これは流星プロジェクトのためであり、したがってインライン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;
}

この場合、スパンが1つだけであれば、CSSルールをそのスパンに直接追加できました。

CSS（特定のスパンに対するオプション）

.intlFlag { line-height: 42px; }

これは私にとってどのように表示されるかです。

enter image description here

33
JGallardo

親divに高さを追加します50px。子スパンで、line-heightを追加します。50px;これでスパン内のテキストは垂直方向の中央になります。これは私のために働きました。

0
DTS