web-dev-qa-db-ja.com

テキストの行でインラインブロックを垂直に整列するにはどうすればよいですか？

未知の幅と高さをとるインラインブロックを作成したいです。 （コンテンツが動的に生成されたテーブルが内部にあります）。さらに、インラインブロックは、「my text（BLOCK HERE）」などのテキスト行内に配置する必要があります。見た目を美しくするために、ブロックを行の垂直方向の中央に配置しようとしています。したがって、ブロックが次のようになっている場合：

TOP
MIDDLE
BOTTOM

次に、テキスト行は「My text（[MIDDLE]）」（行の上下にTOPとBOTTOMを含む）になります。

ここに私がこれまで持っているものがあります。

CSS

.example {
  background-color: #0A0;
  display: inline-block;
  margin: 2px;
  padding: 2px;
  position: relative;
  text-align: center;
}

HTML

<div class="example">TOP<br />MIDDLE<br />BOTTOM</div>

Example

htmlvertical-alignmentcss
134
Geoff
code {
    background: black;
    color: white;
    display: inline-block;
    vertical-align: middle;
}
<p>Some text <code>A<br />B<br />C<br />D</code> continues afterward.</p>

Safari 5およびIE6 +でテストおよび動作します。

166
Midas

display: inline-blockは、コンストラクトの3つすべての部分（前、「ブロック」、後）を1つにするだけの友達です。次に、それらをすべて中央に垂直に配置できます。

実施例

（とにかくあなたの写真のように見えます;））

CSS：

p, div {
  display: inline-block; 
  vertical-align: middle;
}
p, div {
  display: inline !ie7; /* hack for IE7 and below */
}

table {
  background: #000; 
  color: #fff; 
  font-size: 16px; 
  font-weight: bold; margin: 0 10px;
}

td {
  padding: 5px; 
  text-align: center;
}

HTML：

<p>some text</p> 
<div>
  <table summary="">
  <tr><td>A</td></tr>
  <tr><td>B</td></tr>
  <tr><td>C</td></tr>
  <tr><td>D</td></tr>
  </table>
</div> 
<p>continues afterwards</p>
23
clairesuzy