【CSS】縦方向で中央配置にするのに苦戦した話

スポンサーリンク

読者が1人去ってった・・・ま、誰か分からんけど。縁が無かったね。サヨナラ。お世話になりました。

さて、最近ホームページを作成していますが、ヘッダで困った問題が起きました。

それは、縦方向で中央配置出来ないことです。paddingで調整出来ますが、スマートじゃないんですね。

そんな感じでGoogle先生に聞いても明確な答えは出ず。

「しゃーない、自力で頑張るぞって感じであれやこれやと試しました。

結局はこれで解決。HTMLはこんな感じ。

<header>
    <div id="header-contents">
        <h1><a href="index.html">Title</a></h1>
    </div>
</header>  

CSSはこんな感じ。

header {
    display: table;
    height: 300px;
    width: 100%;
}
            
#header-contents {
    display: table-cell;
    vertical-align: middle;
}

簡単に説明すると、「header」に

「display: table」

を書いて、

「header-contents」に

「display: table-cell」と

「vertical-align: middle」

を書いてます。

これでヘッダの高さが変わっても、縦方向で中央に配置することが出来ました。

ここでは仮に「height: 300px;」にしています。実際は100px未満にするつもりです。

横方向のサイズは「width: 100%;」にしてます。これで横幅いっぱいになります。

ちなみに、iPadで表示確認済み。パソコンは持ってないから分からねーw

パソコンが欲しいなぁ・・・。

ちなみに、作業中に突然iPadがクラッシュしました(笑)。幸いデータは飛ばなかったですが、冷や汗をかきました。

iPadは毎日朝から晩まで使ってるので、たまには休ませなあかんかなって感じがしていますが、そうはいかないので今後もドンドン使って行きたいと思います。

おしまい。