2143

うまくいかないのはなぜvertical-align: middleですか？それでも、vertical-align: top 機能します。

span{
  vertical-align: middle;
}
<div>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span>Doesn't work.</span>
</div>

4

26 に答える 26

350

以下に、垂直方向に揃えるための簡単なテクニックをいくつか示します。

一行縦揃え:中央

これは簡単です: テキスト要素の行の高さをコンテナの行の高さと同じに設定します

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

複数行の垂直整列:下

コンテナーに対して内側の div を絶対に配置する

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

複数行の垂直整列:中央

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

古いバージョンの IE <= 7 をサポートする必要がある場合

これを全面的に正しく機能させるには、CSS を少しハックする必要があります。幸いなことに、私たちに有利に働く IE のバグがあります。top:50%コンテナとtop:-50%内部 div で設定すると、同じ結果が得られます。IE がサポートしていない別の機能である高度な CSS セレクターを使用して、この 2 つを組み合わせることができます。

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

可変コンテナの高さ vertical-align:middle

transform: translateYこのソリューションでは、プロパティを利用するため、他のソリューションよりも若干最新のブラウザーが必要です。( http://caniuse.com/#feat=transforms2d )

次の 3 行の CSS を要素に適用すると、親要素の高さに関係なく、親要素内で垂直方向に中央揃えになります。

position: relative;
top: 50%;
transform: translateY(-50%);
于 2009-01-28T21:45:03.963 に答える
104

divをフレックス コンテナに変更します。

div { display: flex; }

現在、すべてのコンテンツの配置を中央に配置する方法は 2 つあります。

方法 1:

div { align-items: center; }

デモ

方法 2:

div * { margin: auto 0; }

デモ

でさまざまな幅と高さの値を試し、imgでさまざまなフォント サイズの値を試してみるとspan、それらが常にコンテナーの中央にあることがわかります。

于 2014-03-24T07:54:59.223 に答える
97

vertical-align: middle完全に中央に配置するには、両方の要素に適用する必要があります。

<div>
  <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
  <span style="vertical-align:middle">Perfectly centered</span>
</div>

受け入れられた答えは、アイコンをその隣のテキストの x 高さの約半分の中央に配置します ( CSS 仕様で定義されているように)。これで十分かもしれませんが、テキストの上部または下部にアセンダーまたはディセンダーが目立つ場合は、少し見栄えが悪くなります。

中央揃えのアイコン比較

左側のテキストは整列されていません。右側は上の図のようになっています。ライブ デモは、vertical-align に関するこの記事にあります。

vertical-align: topシナリオで機能する理由について誰かが話しましたか? 問題の画像はおそらくテキストよりも背が高いため、行ボックスの上端を定義しています。vertical-align: topスパン要素で、それをラインボックスの一番上に配置します。

vertical-align: middleとの動作の主な違いは、最初の要素はボックスのベースライン (すべての垂直方向の配置を満たすために必要な場所に配置されるため、かなり予測不可能topに感じられる) に対して相対的に移動し、2 番目の要素はライン ボックスの外側の境界に対して相対的に移動することです (つまり、より具体的に）。

于 2014-09-11T12:58:35.143 に答える
64

受け入れられた回答で使用されている手法は、単一行のテキスト ( demo ) でのみ機能しますが、複数行のテキスト ( demo ) では機能しません。

複数行のテキストを画像に対して垂直方向に中央揃えする必要がある場合は、いくつかの方法があります (方法 1 と 2 は、この CSS トリックの記事に触発されたものです) 。

方法 #1: CSS テーブル ( FIDDLE ) (IE8+ ( caniuse ))

CSS:

div {
    display: table;
}
span {
    vertical-align: middle;
    display: table-cell;
}

方法 #2: コンテナの疑似要素 ( FIDDLE ) (IE8+)

CSS:

div {
   height: 200px; /* height of image */
}

div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

img {
    position: absolute;
}

span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 200px;  /* width of image */
}

方法 #3: フレックスボックス ( FIDDLE ) ( caniuse )

CSS (上記のフィドルにはベンダー プレフィックスが含まれています):

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}
于 2013-12-24T21:06:14.827 に答える
30

このコードは IE でも FF でも機能します。

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>
于 2012-07-02T14:41:34.423 に答える
20

line-heightこれを機能させるには、をdivの高さに設定する必要があるためです。

于 2009-01-28T21:05:08.817 に答える
12

記録のために、アライメント「コマンド」はSPANで機能しないはずです。これは、ブロックレベルのタグではなくインラインタグであるためです。インラインのポイントはテキストの流れを妨げることではないため、整列、マージン、パディングなどはインラインタグでは機能しません。

CSSは、HTMLタグをインラインとブロックレベルの2つのグループに分割します。「cssblockvsinline」を検索すると、すばらしい記事が表示されます...

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

（コアCSSの原則を理解することは、それほど煩わしくないための鍵です）

于 2011-11-18T13:24:05.230 に答える
12

基本的に、CSS3 に取り掛かる必要があります。

-moz-box-align: center;
-webkit-box-align: center;
于 2011-11-29T18:24:13.407 に答える
11

他にできることは、テキストline-heightを 内の画像のサイズに設定することです<div>。次に、画像をvertical-align: middle;

それは真剣に最も簡単な方法です。

于 2012-01-12T14:52:01.553 に答える
11

line-height:30pxテキストが画像と整列するようにスパンに使用します。

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>
于 2013-05-20T23:50:12.333 に答える
10

marginこれらの回答のいずれにもまだ解決策が見られていないため、この問題に対する私の解決策を次に示します。

このソリューションは、画像の幅がわかっている場合にのみ機能します。

HTML

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

CSS

div {
  overflow:hidden;
}
img {
   width:80px
   margin-right:20px;
   display:inline-block;
   vertical-align:middle;
}
span {
   width:100%;
   margin-right:-100px;
   padding-right:100px;
   display:inline-block;
   vertical-align:middle;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}
于 2016-04-10T11:26:02.127 に答える
7

これらのスパン プロパティを書き込みます

span{
    display:inline-block;
    vertical-align:middle;
}

プロパティを使用するdisplay:inline-block;場合に使用します。vertical-alignそれらは関連付けられたプロパティです

于 2016-11-08T06:26:18.517 に答える
6 
background:url(../images/red_bullet.jpg) left 3px no-repeat;

通常、代わりに 3px を使用しますtop。その値を増減することで、画像を必要な高さに変更できます。

于 2012-04-13T07:21:30.740 に答える
3

たとえば、jQuery mobileのボタンでは、次のスタイルを画像に適用することで、ボタンを少し微調整できます。

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}
于 2012-10-24T15:22:55.923 に答える
3

複数行ソリューション:

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

すべてのブラウザと ie9+ で動作します

于 2014-02-24T14:20:27.650 に答える
-4

あなたはおそらくこれが欲しいでしょう：

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

他の人が示唆しているようvertical-alignに、画像を試してみてください：

<div>
   <img style="width:30px; height:30px; vertical-align:middle;">
   <span>Didn't work.</span>
</div>

CSSは迷惑ではありません。ドキュメントを読まないだけです。; P

于 2009-01-28T21:10:00.417 に答える