css - 効かない - vertical-align 画像

displayプロパティを使用してイメージを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>

divをflexコンテナに変更します。

div {display:flex;}

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

方法1：

div {align-items:center;}

DEMO

方法2：

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

DEMO

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

おそらくこれが必要です：

<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

このコードはIEだけでなくFFでも動作します：

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

これらの答えのいずれかに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;
}

これを行うには、 line-heightをdivの高line-heightに設定する必要があるため

まず、 インライン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>

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

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

レコードの場合、位置合わせ「コマンド」はブロックレベルのタグではなく、 インラインタグであるため、SPAN上では機能しません。 インラインのポイントはテキストの流れを混乱させないため、アライメント、マージン、パディングなどのようなものはインラインタグでは機能しません。

CSSは、HTMLタグをインラインとブロックレベルの2つのグループに分割します。 検索 "css block vs inline"と素晴らしい記事が表示されます...

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

（コアCSSの原則を理解することは、それほど迷惑ではない）

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

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

垂直整列のための簡単なテクニックを次に示します。

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%コンテナの上top:50%とtop:-50%内部divのtop:-50% 、あなたは同じ結果を達成することができます。 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>

可変コンテナの高さ縦線：中

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

要素に次の3行のCSSを適用すると、親要素の高さにかかわらず、その要素を親の中に垂直に配置します。

position: relative;
top: 50%;
transform: translateY(-50%);

基本的には、CSS3に落とさなければなりません。

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

複数のソリューション：

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 +

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

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