web-dev-qa-db-ja.com

TDのすべての（！）要素を垂直に揃えますか？

私は単純なtableと1 TDでvertical-align:middle;。このTDにはImageが含まれます。

<table>
<tr>
    <td>
        <img src='http://static.jsbin.com/images/favicon.png'/>
    </td>
</tr>
</table>

enter image description here

すべてがOkであり、IMGは垂直に配置されます。

Butその画像の後に別の要素を追加する場合（たとえばspan）：

  <td>
    <img src='http://static.jsbin.com/images/favicon.png'/>
    <span>aaa</span>
  </td>

結果は次のとおりです。

enter image description here

質問

TDの垂直整列は、その子を垂直整列allする必要はありませんか？

spanを中央揃えにする方法

Full JSBIN

NB

別のTDを追加したり、floatをpadding/marginと共に使用したりしません。 IE8 +。

編集：

望ましい結果：

enter image description here

htmlcssvertical-alignment
43
Royi Namir

質問
TDのすべての子を垂直に揃える必要がありますか？

[〜＃〜] no [〜＃〜]。
_vertical-alignをtdに適用すると、tdにのみ適用され、notその子のいずれかによって継承されます。

TDにスパンのみが含まれている場合-垂直に整列します。TDにIMGのみが含まれている場合-に整列されます。

これは、vertical-align for tdの動作方法によるものです。セルの合計の高さ、つまりtdが計算され、セル全体が垂直に配置されます。

単一のimgがある場合、tdの高さはimgの高さと同じであるため、seemsimgのvertical-alignもmiddleであること。しかし、実際には、tdは中央に垂直に配置され、imgはvertical-align : baselineとして

単一のspanがある場合も同様です。

しかし、私は両方を持っている場合-それはありません。何故ですか ？

現在、heightのtdは、両方のheight + imgのspanの組み合わせです。そのため、実際には、tdは中央で垂直に配置されますが、imgおよびspanではありません。

スパンを中央に配置するにはどうすればよいですか？

このCSSを適用する必要があります：

td > * {
    vertical-align : middle;
}

これにより、すべての子にCSSが適用されます。

より良い画像については、 JSFiddle を確認してください。

これがあなたの質問に答えることを願っています。

58
Nikhil Patel

vertical-align: middle;をスパンに使用できます

img
{
  height:43px;width:43px;
  display: inline;
  vertical-align: middle;
}

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

}

あなたのjsbin

コメント通り

Tdにvertical-align: middle;が与えられていると考えるかもしれませんが、この中のすべてのコンテンツを揃える必要がありますが、画像とブラウザが画像を理解しているスパンは何ですか？ ：これはインラインまたはインラインブロックであるため、表示を設定する必要があります。インラインまたはインラインブロック。その後、画像の表示プロパティを適用するだけで機能することがわかります。 デモ

編集

imgタグ：ソース： インラインvsインラインブロックを表示

それらは幅と高さを持つという点で「ブロック」要素です。

確かに、両方とも-より正確には、「インラインブロック」要素です。これは、テキストのようにインラインで流れるが、ブロック要素のような幅と高さも持つことを意味します。

これもチェックしてください：

置換された要素

置換された要素は、外観と寸法が外部リソースによって定義される要素です。例には、画像（タグ）、プラグイン（タグ）、およびフォーム要素（、、、およびタグ）が含まれます。他のすべての要素タイプは、非置換要素と呼ばれます。

置換された要素は、固有の寸法を持つことができます。幅と高さの値は、ドキュメント内の周囲ではなく、要素自体によって定義されます。たとえば、画像要素の幅がautoに設定されている場合、リンクされた画像ファイルの幅が使用されます。固有の寸法は、要素の計算された寸法を決定するために使用される固有の比率も定義します。1つの寸法のみを指定する必要があります。たとえば、画像要素の幅（たとえば100px）のみが指定され、実際の画像が幅200ピクセル、高さ100ピクセルの場合、要素の高さは同じ量で50pxにスケーリングされます。

置換された要素は、CSSの制御外で、要素によって課せられる視覚的なフォーマット要件を持つこともできます。たとえば、フォーム要素に対して表示されるユーザーインターフェイスコントロール。

インライン書式設定コンテキストでは、置換された要素を、折り返しとレイアウトの目的で単一の大きな文字として機能する要素と考えることもできます。置換されたインライン要素の幅と高さを指定できます。その場合、要素が配置されているラインボックスの高さは、指定されたボックスプロパティを含む、置換された要素を収容するのに十分な高さになります。

7
Bhojendra Rauniyar

すべての場合において、td上のvertical-align: middle;は、期待されることを行います。つまり、tdをその行の中央に配置し、tdの内容全体を垂直中央（デフォルト）に揃えて、上部と下部に等しいスペースを残します。

これは、 W3 Spec が言うことですvertical-align: middle：

セルの中心は、セルがまたがる行の中心に揃えられます。

enter image description here

行の高さの計算：

「table-row」要素のボックスの高さは、ユーザーエージェントが行のすべてのセルを使用可能にすると計算されます。これは、行の計算された「高さ」、行の各セルの計算された「高さ」の最大値、セルに必要な最小の高さ（MIN）。

CSS 2.1では、セルボックスの高さはコンテンツに必要な最小の高さです。テーブルセルの 'height'プロパティは行の高さに影響を与える可能性があります（上記参照）が、セルボックスの高さは増加しません。

行の高さよりも小さいセルボックスには、追加の上部または下部のパディングが適用されます。

上記の結果、trおよびtdの高さは100pxになりますが、セルボックスはコンテンツに必要な高さだけを占有します（img height = 43px） 。セルボックスは行の高さよりも小さいため、上の画像のボックス5に示すように余分なパディングが追加され、コンテンツも中央に揃えられます。

TDにはイメージのみがあります：

imgのみがある場合、コンテンツの高さはimgの高さと等しくなります。そのため、中央に配置されます。

enter image description here

上の画像からわかるように、imgはその内容を中央に揃えるため、tdにvertical-align: middleを明示的に必要としません。

TDにはインラインデータのみがあります：

tdにspanまたはspanとインラインdivのみがある場合、コンテンツの高さはテキストのデフォルトのline-height（または指定されたline-height）。この場合も、tdが正しく整列します。

enter image description here

テキストコンテンツが最初の行を超えると（デモを参照）、tdがfirst-line（シアンの背景でマーク）を自動的に押し上げて、コンテンツ全体が中央に配置されます（1行だけではありません）。

TDにはイメージとスパンがあります：

imgとspan（インラインテキスト）をtd内に配置すると、コンテンツの高さはimgとline-heightの高さに等しくなります2行目以降。

この状況では、以下で説明するように2つの可能なケースがあります。

ケース1-imgタグにnovertical-alignspecified

この場合、imgはbaseline（デフォルト）に揃えられます。次に、tdはコンテンツ全体を中央に揃えます。つまり、tdは、コンテンツの上下に28.5px（=（100-43）/ 2）gapを残します。繰り返しますが、vertical-align on tdがジョブを実行し、コンテンツを中央に配置します（つまり、上下に等しいギャップを残します）。ただし、imgの高さが大きいため、テキストはプッシュダウンされます。

enter image description here

imgの高さを行の高さ（10pxなど）より小さくすると、img + spanでも中央に揃えられることがわかります。

ケース2-imgtag hasvertical-align: middle

この場合も、tdのvertical-alignは、ケース1の場合と同じことを行います。ただし、この場合のテキストは 中央付近 です。 imgも行のmiddleに揃えられているためです。

enter image description here

table {
  border: solid 1px red;
}
td {
  height: 100px;
  width: 200px;
  vertical-align: middle;
  border: solid 1px green;
}
img {
  height: 43px;
  width: 43px;
  border: solid 1px green;
}
.one td + td img {
  vertical-align: middle;
}
.three td + td img {
  height: 10px;
  width: 10px;
}
.four img {
  vertical-align: middle;
}
.five img + img{
  height: 50px;
  width: 50px;
}
td:first-line {
  background-color: cyan;
}
div {
  display: inline;
}
<table>
  <tr class='one'>
    <td>
      <img src='http://static.jsbin.com/images/favicon.png' />
    </td>
    <td>
      <img src='http://static.jsbin.com/images/favicon.png' />
    </td>
  </tr>
  <tr class='two'>
    <td>
      <div>aaa</div>
      <span>aaa</span>
    </td>
    <td>
      <div>aaa</div>
      <span>aaa aaaaaaa aaaaaaaa aaaaaaaa</span>
    </td>
  </tr>
  <tr class='three'>
    <td>
      Case 1
      <img src='http://static.jsbin.com/images/favicon.png' />
      <span>Image + Span</span> 
    </td>
    <td>
      Case 1
      <img src='http://static.jsbin.com/images/favicon.png' />
      <span>Image + Span</span> 
    </td>
  </tr>
  <tr class='four'>
    <td>
      Case 2
      <img src='http://static.jsbin.com/images/favicon.png' />
      <span>Image + Span</span> 
    </td>
    <td>
      <img src='http://static.jsbin.com/images/favicon.png' />
      <span>Image + Span + more text.......</span> 
    </td>
  </tr>
  <tr class='five'>
    <td>
      Case 3
      <img src='http://static.jsbin.com/images/favicon.png' />
      <img src='http://static.jsbin.com/images/favicon.png' />
      <span>Image + Span text...</span> 
    </td>
    <td>
      <img src='http://static.jsbin.com/images/favicon.png' />
      <span>Image + Span + more text.......</span> 
    </td>
  </tr>  
</table>
3
Harry

これがJSフィドルソリューションです

フィドル

ここにCSSがあります

  table
{
  border:solid 1px red;
  width:300px;
}

td
{
  height:100px;
  vertical-align:middle;
  width:100%;
  border:solid 1px green;
}
img
{
  display: inline;
height: 43px;
width: 43px;
  position: relative !important;
float: left;
}

span
{
  height: auto !important;
width: 80%;
float: right;
position: relative;
vertical-align: middle !important;
text-align: left;
}
3
Anobik

vertical-align:middle;をimgスタイルに追加するだけですか？

デモ

2
Jazcash
<style>
table
{
  border:solid 1px red;
  width:300px;
}

td
{
  height:100px;  
  width:100%;
  border:solid 1px green;
  vertical-align:middle;
  line-height:100px;
}
img
{
  height:43px;width:43px;
  vertical-align:middle;
}
</style>
1
Ankit Agrawal

このCSS属性は、他の種類の要素には適用されません。初心者の開発者が（標準のように）通常のブロック要素に垂直方向の配置を適用すると、ほとんどのブラウザーはその要素のすべてのインラインの子に継承する値を設定します。

vertical-align: middleを<img>クラスに追加するだけです。

CSSは次のようになります...

table
{
  border:solid 1px red;
  width:300px;
}

td
{
  height:100px;
  vertical-align:middle;
  width:100%;
  border:solid 1px green;
}
img
{
  height:43px;width:43px;
  vertical-align: middle;
}

あなたは見ることができます Sample Fiddle...

0
webfrogs

[〜＃〜] demo [〜＃〜]

このクラスを追加してください：

td *{
  vertical-align:middle
}

編集：

質問は、tdテキストにpicを追加すると、tdの中間ではなくpicの下部に移動する理由です。

これは私の答えです：

tdvertical-alignをmiddleに設定すると、すべてのコンテンツvertical-alignをmiddleに設定する必要はありませんが、baselineのままです。テキストに写真を追加すると、行の高さは画像の高さまで上昇し、テキストはこの高さの下にあるため、この問題を解決するにはvertical-alignをmiddleに設定する必要があります。

ここで、私が言ったことを見ることができます： [〜＃〜] demo [〜＃〜]

そして私の悪い英語についてすみません

0
Mohsen Safari

私たちは皆ほぼそこにいると思いますが、

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

動作するようです。

Codepenの例

それとも何か不足していますか？

0
Paulie_D

これはどういう意味ですか？ http://jsfiddle.net/JFVNq/

理由は、スパンがインラインとして扱われるため、それらをブロックする必要があるためです。

スパンのCSS：

td.vert span
{
    vertical-align: middle;
    display: block;
}
0
andrewb