テーブル（divですが）のデザインを整えたいと思います

Question

下記のようなコードがあります。

<style>
div.nested span {
	margin-bottom: 0em;
	display: block;
}

div.nested {
	/* margin:20px; */
	margin-left: auto;
	margin-right: auto;
/* display:inline-block; */
}

</style>

<div class = "nested">
	<span style="font-size:12px;text-align:right;">静岡県沼津市</span>
	<span style="font-size:20px;text-align:left;">駿河国</span>
	<span style="font-size:60px;text-align:center;">12. 沼津宿</span>
	<span style="font-size:12px;text-align:right;">京都府京都市</span>
	<span style="font-size:20px;text-align:left;">山城国</span>
	<span style="font-size:60px;text-align:center;">54.三条大橋</span>
	<span style="font-size:12px;text-align:right;">静岡県島田市</span>
	<span style="font-size:20px;text-align:left;">遠江国</span>
	<span style="font-size:60px;text-align:center;">24. 金谷宿</span>
	<span style="font-size:12px;text-align:right;">静岡県静岡市</span>
	<span style="font-size:20px;text-align:left;">駿河国</span>
	<span style="font-size:60px;text-align:center;">15. 蒲原宿</span>
</div>

これで表示させると、「駿河国」などは左端に、「静岡県沼津市」などは右端に来るようになっています。

やりたいことは、例えばこのページですと、

★「54.三条大橋」が最も幅が広いspanタグなので、<div class = "nested">の幅を「54.三条大橋」の幅に合わせて、
★かつ<div class = "nested">をページの左右方向（align）上で中央揃えしたいと思います。

可能でしょうか？
ご回答いただけますと幸いです。よろしくお願いいたします。

Answer 1

こういうこと・・・？

<style>
div.nested span {
    margin-bottom: 0em;
    display: block;
}

div.nested {
    /* margin:20px; 
    margin-left: auto;
    margin-right: auto;*/
    display: inline-block;
}
div.outer {
    text-align: center;
}
</style>

...


<div class = "outer">
    <div class = "nested">
        <span style="font-size:12px;text-align:right;">静岡県沼津市</span>
        <span style="font-size:20px;text-align:left;">駿河国</span>
        <span style="font-size:60px;text-align:center;">12. 沼津宿</span>
        <span style="font-size:12px;text-align:right;">京都府京都市</span>
        <span style="font-size:20px;text-align:left;">山城国</span>
        <span style="font-size:60px;text-align:center;">54.三条大橋</span>
        <span style="font-size:12px;text-align:right;">静岡県島田市</span>
        <span style="font-size:20px;text-align:left;">遠江国</span>
        <span style="font-size:60px;text-align:center;">24. 金谷宿</span>
        <span style="font-size:12px;text-align:right;">静岡県静岡市</span>
        <span style="font-size:20px;text-align:left;">駿河国</span>
        <span style="font-size:60px;text-align:center;">15. 蒲原宿</span>
    </div>
</div>

Comments

[tiqua_nibio]

素晴らしいです。当初はTableでやろうと思ってはいたのですが、入れ子になってしまうと思い、DIVでやっていましたがなかなか思いつきませんでした。

Answer 2

見た感じやりたいことは縦揃えかつ横揃えですね？
それは表なのでtableを利用するのが妥当です

Answer 3

想定結果がよくわかりませんけどこーゆーこと？

div.nested span {
    margin-bottom: 0em;
    display: block;
}

div.nested {
  display:inline-block;
  text-align:center;
  width:100%;
}

Comments

[azuapricot]

あー横も一列にしたいのか。

[azuapricot]

想定結果を図解したほうがいいかもですね