CSS入門：製作一個含有header, footer的簡易頁面

CSS對於網頁設計的人來說是不可或缺的工具，要達到妥善運用CSS的境界，基本功必然是要扎實才行。

一直以來都是套用已有的CSS框架像是Bootstrap, Bulma, UIKit...等等, 對於一些基本的CSS用法是一知半解的狀態。 為了鍛鍊自己的基本功，除了翻查語法手冊外，多模仿＆參考各家網站的設計應該是一件相當有益的方式。 因此，這次先從普遍常有的頁面開始著手練習，重新認識文字，圖片的位置設定方式。

Contents

• Result
• 製作要點
  • div要素水平置中
  • 文字要素置中
  • 圖片要素水平置中
• 參考
• 後感

Result

製作完成的頁面如下。 如同一般常見的頁面，整體的頁面分成header, main, footer三個部分。

製作要點

簡單介紹div要素，文字要素，圖片要素的置中方法與注意點。

div要素的水平置中

width: 60%;
margin: 0 auto;

使用此法時，需要設定div要素的width才有效。

文字要素的置中

水平置中
方法1: 將文字要素的部分用一個div包起來，在用上面介紹的div要素的橫軸方向置中的方式。

方法2: 文字要素如<h1>, <p>等，使用text-align來做設定。

text-align: center;

全置中

.flex-center {
  display: flex;
  justify-content: center; //水平置中
  align-items: center; //垂直置中
  height: 400px;
  border: 3px solid green; 
}

文字的垂直置中的方法好像沒有想像中的簡單，以上的做法需要將要置中的文字要素放到一個<div>中，然後對<div>來做CSS設定。

<div class="flex-center">
  <div>
    <p>This is a flex-center example</p>
    <ul>
      <li>Javascript</li>
      <li>CSS</li>
      <li>HTML</li>
    </ul>
  </div>
</div>

圖片要素的水平置中

img {
  margin: 0 auto;
  display: block;
}

可以使用margin來實現，但使用此法時，圖片的display屬性必須設定為 block 。

參考

• https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics

後感

文字要素的全置中 方式似乎可以應用的場合較多，因此這個方法相對來說比較實用一些。

但每個方法有其限制，似乎沒有一個十全十美的方法，所以網路上也有很多其他的設定方式。我想在不同的設計要求下，使用符合要求的方式來設定才是最為重要的。因此多學一項的設定方式，也就多一種設定選項以備使用才是最為萬全的作法。