web-dev-qa-db-ja.com

画像の横にあるテキストを垂直方向に揃える

vertical-align: middleが動かないのはなぜですか？それでも、vertical-align: top は workを行います。

<div>
   <img style="width:30px;height:30px">
   <span style="vertical-align:middle">Doesn't work.</span>
</div>
cssvertical-alignment
1823
sam

実際には、この場合は非常に簡単です。画像に垂直方向の配置を適用します。すべて1行に収まっているので、実際にはテキストではなく整列したい画像です。

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Works.</span>
</div>

FF3でテスト済み。

これで、このタイプのレイアウトにflexboxを使用できます。

.box {
   display: flex;
   align-items:center;
}
<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>
2069
Michael Haren

垂直整列のための簡単なテクニックは次のとおりです。

1行縦揃え：中央

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

<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%を、内側のdivにtop:-50%を設定しても、同じ結果が得られます。 IEがサポートしていない別の機能を使用して、これら2つを組み合わせることができます。高度なCSSセレクタ。

<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%);
331
Adam Lassek

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

div {display:flex;}


これで、すべてのコンテンツの配置を中央揃えにする方法が2つあります。

方法1： 

div {align-items:center;}

_ demo _

方法2： 

div * {margin-top:auto; margin-bottom:auto;}

_ demo _

imgでさまざまな幅と高さの値を、そしてspanでさまざまなフォントサイズの値を試すと、それらは常にコンテナの中央に残ります。

89
Mori

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仕様 で定義されているとおり）。これは十分に良いかもしれませんが、テキストの上または下に目立つように目立つまたは下がる目がある場合は、少し目立つことがあります。

centered icon comparison

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

なぜvertical-align: topがシナリオで機能するのか誰かが話しましたか？ 問題の画像はおそらくテキストよりも高いため、ラインボックスの上端を定義します。 span要素のvertical-align: topは、行ボックスの先頭に配置するだけです。

vertical-align: middleとtopの動作の主な違いは、最初の要素はボックスのベースライン（すべての垂直方向の配置を満たすために必要な場所に配置され、したがってunpredictableを感じる）に対して要素を移動することです。ラインボックス（より具体的です）。

82
christopheraue

認められた答えで使用されたテクニックは単一行のテキスト（ demo ）のためにだけ働きます、しかしそこで述べられるように複数行のテキスト（ demo ）のために働きません。

誰かが縦に複数行のテキストを画像の中央に配置する必要があるなら、ここにいくつかの方法があります（ このCSS-Tricksの記事 からヒントを得た方法1と2）。

方法1：CSSテーブル（_フィドル_）（IE 8 +（ 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：Flexbox（_フィドル_）（ caniuse ）

_ css _ （上記のフィドルにはベンダーのプレフィックスが含まれます）：

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}
59
Danield

このコードはFFと同様にIEで動作します。

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>
27
HTMLnewBie

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

19
Ikke

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

-moz-box-align: center;
-webkit-box-align: center;
12
Dan

レコードの場合、整列「コマンド」はSPANに対して機能しません。これは インライン タグであり、 ブロックレベル タグではないためです。インラインのポイントはテキストの流れを乱すことではないため、配置、余白、パディングなどのものはインラインタグでは機能しません。

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

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

（CSSの中心的な原則を理解することは、それほど面倒なことではないことへの鍵です）

11
David

テキストが画像と揃うように、スパンにline-height:30pxを使います。

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

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

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

10
nullpoint81

これらの答えのどれにもまだ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;
}
8
Fleuv

これらのspanプロパティを書く

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

display:inline-block;プロパティを使用する場合はvertical-alignを使用します。関連プロパティがあります。

6
Mr.Pandya
background:url(../images/red_bullet.jpg) left 3px no-repeat;

私は一般的にtopの代わりに3pxを使います。その値を増減することで、画像を必要な高さに変更できます。

6
AspiringCanadian

displayプロパティを使ってimageをinline elementとして設定することができます

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>
4
Super User

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

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}
3
den232

マルチラインソリューション：

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 +で動作します

2
Benjamin Crouzier

混乱するかもしれません、私は同意します。テーブル機能を利用してみてください。このシンプルなCSSトリックを使ってモーダルをWebページの中央に配置します。大規模なブラウザをサポートしています。

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

そしてCSS部分：

.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }

あなたが望むようにそれが動作するようにあなたはスタイルを整えて、イメージとテーブルコンテナのサイズを調整しなければならないことに注意してください。楽しい。

2
CodeGems

まず インラインCSS はまったく推奨されていません、それはあなたのHTMLを本当にめちゃくちゃにします。

イメージとスパンを揃えるには、単にvertical-align:middleを実行します。

.align-middle {
  vertical-align: middle;
}
<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>
1
Alireza