画像の横にテキストを垂直に配置しますか？
回答:
実際、この場合は非常に簡単です。画像に垂直方向の配置を適用します。すべて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でテスト済み。
これで、このタイプのレイアウトにフレックスボックスを使用できます。
.box {
display: flex;
align-items:center;
}<div class="box">
<img src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>width:16px;height:16px）小さいサイズに設定すると、画像が低すぎることがわかります
ここでは、垂直方向の配置の簡単なテクニックをいくつか紹介します。
1行のvertical-align：middle
これは簡単です：テキスト要素の行の高さをコンテナの行の高さと等しくなるように設定します
<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がサポートしていない別の機能を使用して、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%);
display:tabledisplay:table-cell
display:tableさまざまなブラウザーにはいくつかの制限があります（max-height要素がテーブルセル内にある場合、IE11 では機能しません）。そのため、一部のエッジケースでは、テーブルセルを使用して垂直に配置することはお勧めできません。
をdivflexコンテナーに変更します。
div { display:flex; }
現在、すべてのコンテンツの配置を中央揃えにする方法は2つあります。
方法1：
div { align-items:center; }方法2：
div * { margin-top:auto; margin-bottom:auto; }でさまざまな幅と高さの値、imgおよびでさまざまなフォントサイズの値を試してみてspanください。それらは常にコンテナの中央に残っていることがわかります。
justify-content: center;揃えにするには、スペースを追加する必要があります（<br/>タグを使用せずに）padding: 1em;。私たちの最新のブラウザ開発者にとって素晴らしいアップデートです。
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: topシナリオでうまくいく理由について誰かが話しましたか？質問の画像はおそらくテキストよりも高いため、行ボックスの上端を定義します。vertical-align: top次に、span要素上で、行ボックスの上部に配置します。
間の挙動の主な相違点vertical-align: middleとtopなる（全ての垂直アライメントを満たすために必要な任意の場所に配置され、従って、かなり感じているボックスのベースラインに対して第一移動要素その予測不可能な行ボックスの外側の境界）と第2相対（ありますより具体的な）。
受け入れ答えに使用される技術は、単一の行のテキスト（のためにのみ動作デモ）ではなく、複数行のテキスト（デモ） -そこに述べたように。
複数行のテキストを画像の中央に垂直に配置する必要がある場合は、いくつかの方法があります（このCSS-Tricksの記事からヒントを得た方法1および2 ）。
方法＃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 */
}
このコードはFFだけでなくIEでも機能します。
<div>
<img style="width:auto; height:auto;vertical-align: middle;">
<span>It does work on all browsers</span>
</div>
記録のために、それはインラインタグであり、ブロックレベルのタグではないため、アライメント「コマンド」はSPANでは機能しないはずです。インラインポイントはテキストフローを中断しないため、インラインタグでは、配置、マージン、パディングなどは機能しません。
CSSは、HTMLタグをインラインとブロックレベルの2つのグループに分けます。「css block vs inline」を検索すると、すばらしい記事が表示されます...
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
（CSSの基本原則を理解することは、それほど煩わしくないことの鍵です）
text-alignそしてvertical-align（上の応用を除いてtd、従来の目的のための要素）は、具体的にするために意図されているinlineとinline-block要素（span、imgなど）。
もう1つの方法は、テキストをline-height内の画像のサイズに設定することです<div>。次に、画像をvertical-align: middle;
それは真剣に最も簡単な方法です。
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;
}マルチラインソリューション：
<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 +で動作します
混乱するかもしれませんが、私は同意します。テーブル機能を利用してみてください。この単純な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; }イメージとテーブルコンテナーのスタイルとサイズを調整して、希望どおりに機能させる必要があることに注意してください。楽しい。
まず、インライン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>ナビゲーションのブラウザに表示されない理由はわかりませんが、画像と中央揃えのテキストを含むヘッダーを表示しようとするときは、通常、このようなスニペットを使用します。
https://output.jsbin.com/jeqorahupo
<hgroup style="display:block; text-align:center; vertical-align:middle; margin:inherit auto; padding:inherit auto; max-height:inherit">
<header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">
<image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
http://lipsum.org</header>
</hgroup>あなたはおそらくこれを望みます：
<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
vertical-align