実現したいこと
上の図のように、大阪駅をテーブルの中央ぞろえさせて、表示させたいです。
発生している問題・分からないこと
cssで、該当するclassに、
text-aligin:center;と入力すると、下は反映されるのに、上は右揃えのままです。
該当のソースコード
css
1.top-station-kan {2 font-size: 40pt;3 font-weight: 700;4 letter-spacing: 12pt;5 text-align: center;6 white-space: nowrap;7 display: flex;8 justify-content: center;9 align-items: **stretch**; /* Change to stretch */10 height: 80px;11}
試したこと・調べたこと
上記の詳細・結果
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Station Board</title> <style> table { background-color: #cdefff; width: 300px; /* テーブル全体の幅をpxで設定 */ margin: 0 auto; /* テーブルを中央に配置 */ border-collapse: collapse; } td { background-color: #00e2cf; text-align: center; vertical-align: middle; /* セル内のコンテンツを中央揃え */ } .top-station-kan { font-size: 40pt; font-weight: 700; letter-spacing: 12pt; text-align: center; white-space: nowrap; display: flex; justify-content: center; align-items: **stretch**; /* Change to stretch */ height: 80px; } .top-station-kana-roma { font-size: 12pt; font-weight: 700; letter-spacing: 1pt; text-align: center; white-space: nowrap; display: flex; justify-content: center; align-items: **stretch**; /* Change to stretch */ height: 40px; } span { letter-spacing: 3pt; } .arrow-left, .arrow-right { font-weight: 700; width: 10%; /* 矢印セルの幅を固定 */ text-align: center; vertical-align: middle; } .previous, .next { width: 35%; /* 前の駅と次の駅セルの幅を固定 */ } .previous { text-align: left; } .next { text-align: right; } </style> </head> <body> <table> <tbody> <tr> <td colspan="5"> <div class="top-station-kan">仁豊野</div> </td> </tr> <tr> <td colspan="5"> <div class="top-station-kana-roma">にぶの<span> </span>Nibuno</div> </td> </tr> <tr> <td class="arrow-left">←</td> <td class="previous"> <span class="previous-kana">こうろ</span><br />Kōro </td> <td></td> <td class="next"> <span class="next-kana">とほり</span><br />Tohori </td> <td class="arrow-right">→</td> </tr> </tbody> </table> </body> </html>
の部分の、top-station-kanという部分は、font-size、font-weight、letter-spacingは反映しますが、
肝心の文字の位置がtext-aligin-centerになりません。どうしてでしょうか。
補足
チャットgptで試したものの、全く的外れな回答しか出なかったです。
0 コメント