html - 2 つのテキストを横に並べてフローティングし、両方を中央に配置する

Question

CSSで以下を実現したい

隣り合わせにする必要がある 2 つのテキストがあります。例: 「電話」の右側にある 2 つの電話番号

電話: 301xxxxx

301xxxxx

これを行うには、2 つの div と 1 つを左にフローティングします。しかし、私はそれらの両方も同様に中央に配置したいと考えています。これを構造化する最良の方法は何ですか？

Answer 1

html:

<div class="blah">
  <div>
    Phone:
  </div>
  <div>
    301xxxxx<br>
    301xxxxx
  </div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

​.blah {
    text-align:center
}
.blah > div {
    vertical-align:top;
    display:inline-block;   
}

デモ

Answer 2

2 つの div が隣り合っており、それらをページの中央に配置することについて話しているのですか?

もしかして

2 つの div に幅を設定し、テキストを内側のテキストの中央に配置しますか?

<div id="outter">
<div id="div1"> phone 1</div>
<div id="div2"> phone 2</div>
<div style="clear:both"></div>
</div>

css

#outter{
width: 400px;
padding: 0;
margin: 0 auto;
}
#div1, #div2{
width: 50%;
float: left;
text-align:center;}

Answer 3

デモ： http： //jsfiddle.net/LRuZp/4/

Answer 4

テーブル構造でそれを行うことができます：

<tr>
    <td>phone</td>
    <td>301xxxx</td><br />
    <td>301xxxx</td>
</tr>

Answer 5

次に、それらを中心にある親に入れますdiv。

のようなブロック要素を中央に配置divするには、それを と に設定する必要がwidth:ありますmargin-left: auto; margin-right: auto;