css、上下左右中央寄せに関して。

Question

質問でｒす。

cssに関してですが
ブロックを、ページの上揃いの左右中央寄せにして
その、ブロック内のテキストをそのブロック内で上下左右中央寄せにしたいと存じております。

ですが、table-cellを使えばvertical-arignとtext-arignは使えるため、確かにブロック内のテキストは
上下左右中央寄せになります。しかし、それでは、今度はmargin:auto;が使えないため。ブロックが左右中央寄せになりません。
これを、解消するためにはどのようなコードを書けば宜しいでしょうか。

図で表しますと。

                              〜ページの中央〜

---

               |                                                         | 
               |                  〜テキスト〜                          |
               |______________________________________________|

---

このような感じにしたいと思っております。
どなたか、ご教示して頂けないでしょうか。
回答おまちしております。

✳︎追記
図の表記がおかしくなってたので修正しました。

Comments

[kei344]

解決されたようでよかったです。まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。

Answer 1

違うかもしれませんが、テーブルとかでよくやるんですけど、margin-rightとmargin-leftをautoにしたりしてます。

Comments

[Susanoo2442]

回答ありがとうございます。

///html

<div class="nume">
<div class="baki5"><p>カテゴリ</p></div>
</div>

///

///css

.baki5{
border-style:dashed;
border-color:red;
width:1000px;
height:50px;
background-color:#000000;
color:#FFFFFF;
vertical-align:middle;
text-align:center;
display:table-cell;
position:absolute;
margin:auto;
top:0;
right:0;
left:0;
}
.nume{
position:relative;
}

///

無事、このコーディングでボックスの左右中央寄せ
テキスト要素の上下左右中央寄せ出来ました！

回答ありがとうございました。

[Z-TALBO]

margin: 0 auto;にすればTOPとか書かなくても一行で収まると思いますよ。

Answer 2

違うかもしれませんが、テーブルとかでよくやるんですけど、margin-rightとmargin-leftをautoにしたりしてます。