CSS對於網頁設計的人來說是不可或缺的工具,要達到妥善運用CSS的境界,基本功必然是要扎實才行。
一直以來都是套用已有的CSS框架像是Bootstrap, Bulma, UIKit...等等, 對於一些基本的CSS用法是一知半解的狀態。 為了鍛鍊自己的基本功,除了翻查語法手冊外,多模仿&參考各家網站的設計應該是一件相當有益的方式。 因此,這次先從普遍常有的頁面開始著手練習,重新認識文字,圖片的位置設定方式。
製作完成的頁面如下。 如同一般常見的頁面,整體的頁面分成header, main, footer三個部分。
簡單介紹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 。
文字要素的全置中 方式似乎可以應用的場合較多,因此這個方法相對來說比較實用一些。
但每個方法有其限制,似乎沒有一個十全十美的方法,所以網路上也有很多其他的設定方式。我想在不同的設計要求下,使用符合要求的方式來設定才是最為重要的。因此多學一項的設定方式,也就多一種設定選項以備使用才是最為萬全的作法。