画像の隣にテキストを垂直方向に配置しますか?

Question

なぜそうしないのか vertical-align: middle 仕事？それでいて、 vertical-align: top する 仕事。

span{
  vertical-align: middle;
}

<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>

Answer 1

実は、この場合には、それは非常に簡単です：画像に垂直整列を適用します。それは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>

Answer 2

ここで垂直整列のためにいくつかの簡単な技術であります

1行垂直整列：中央

この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のバグがあります。内側のdiv要素のコンテナとtop:50%にtop:-50%を設定するには、同じ結果を得ることができます。私たちは、もう一つの特徴IEがサポートされていない使用して両者を組み合わせることができます。高度な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>

可変コンテナの高さの垂直整列：中央

それはtransform: translateYプロパティを使用すると、

このソリューションは、他のソリューションよりもわずかに、より近代的なブラウザが必要です。 （ http://caniuse.com/#feat=transforms2d の）

要素にCSSの次の3行を適用すると、縦方向に関係なく、親要素の高さの親の中にそれを中心に説明する。

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

Answer 3

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

div {display:flex;}

：今、すべてのコンテンツのアライメントを中心には2つの方法があります

の方法1：の

div {align-items:center;}

の DEMO のの

<時間>

の方法2：の

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

の DEMO のの

<時間>

imgにspanと異なるフォントサイズの値に異なる幅と高さの値を試してみて、あなたは彼らが常にコンテナの真ん中に残って表示されます。

Answer 4

申請する必要があります 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 番目はライン ボックスの外側の境界を基準にしています (これはより具体的です)。

Answer 5

受け入れられた回答で使用されているテクニックは、単一行のテキストに対してのみ機能します(デモ) ですが、複数行のテキストではありません (デモ) - そこに記載されているとおり。

誰かがマルチラインのテキストを画像に垂直に集中させる必要がある場合、いくつかの方法があります（方法1と2に触発された方法 この CSS トリックの記事)

方法 #1:CSS テーブル (フィドル) (IE8+ (使ってもいいですか))

CSS:

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

方法 #2:コンテナ上の疑似要素 (フィドル) (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:フレックスボックス (フィドル) (使ってもいいですか)

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

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

Answer 6

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

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

Answer 7

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

Answer 8

基本的に、あなたはCSS3まで取得する必要があります。

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

Answer 9

それはのインラインのタグではなくのブロックレベルのタグであるため、レコードの場合、アライメントが「コマンド」

、SPANで動作してはなりません。インラインのポイントは、テキストフローを破壊していないためなど合わせ、マージン、パディング、のようなものがインラインタグでは動作しません。

インラインとブロックレベル：

CSSは、二つのグループにHTMLタグを分割します。 「インライン対CSSのブロック」を検索し、素晴らしい記事が現れ...

http://www.webdesignfromscratch.com/html-css / CSSのブロック・アンド・インライン/ の

タグ（コアCSSの原則を理解することはそれほど迷惑されていないための鍵です。）

Answer 10

テキストが画像に位置合わせになるようにスパン使用line-height:30px

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

Answer 11

あなたがすることができるもう一つは、line-height内の画像の大きさにテキストの<div>に設定されています。その後vertical-align: middle;する画像を設定する

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

Answer 12

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

Answer 13

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

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

Answer 14

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

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

あなたはdisplay:inline-block;のproperty.Thoseを使用する場合は、

vertical-alignを使用してプロパティをassosiatedている。

Answer 15

は、

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

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

Answer 16

jQueryのモバイルでのボタンには、例えば、あなたがイメージにこのスタイルを適用することによって、それを少し微調整することができます：

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

Answer 17

複数行のソリューション：

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 +

Answer 18

これは、混乱することができ、私は同意するものとします。テーブルの機能を利用してみてください。私は、Webページの中央でのモーダルを配置するために、この単純なCSSのトリックを使用しています。これは、大規模なブラウザをサポートしています：

<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; }

あなたのスタイルに持っていることに注意してください、あなたが望むように動作させるために、画像やテーブルコンテナのサイズを調整します。お楽しみください。

Answer 19

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