iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
0
自我挑戰組

網頁排版個人學習筆記系列 第 4

HTML&CSS|版型與文字置中用法

文章提要

margin:auto 讓版型置中、text-align文字水平與垂直置中


版型置中|margin:auto

版型置中示意圖

  • 環境1(上圖左) : 父元素(.wrap)內的子元素(.header與.content)不設定寬度範例
    子元素(.header與.content)的寬度受父元素限制住,所以可以省略不寫

    • STEP1:HTML 的 body內寫一個wrap包住所有標籤
    • STEP2:CSS中 .wrap寫下margin左右皆auto
      .header與.content的寬度受父元素.wrap限制住了,所以可以省略不寫
<body>
    <div class="wrap">
        <div class="header"></div>
        <div class="content"></div>
    </div>
</body>
.wrap{
    margin:0 auto;
}
  • 環境2(上圖右) : 父元素(.wrap)內的子元素(.header與.content)寬度父元素不同範例
    子元素(.header與.content)的寬度與父元素不同,就無法置中,需另行各自加上margin:0 auto;

文字置中

文字置中示意圖

  • 文字水平置中| text-align 範例
    只能設定水平對齊,無法設定垂直方向對齊

  • 文字垂直水平置中| text-align(水平對齊) 、 line-height(行高) 範例

    • 文字的line-height與包著它的區塊設定相同高度即可。
    • 缺點: 如果包著文字的區塊沒有固定高度,垂直置中就失效了。

※ 垂直置中文章可參考: 卡斯伯老師-CSS 5種垂直置中方法

圖片置中

  • 於html中加入圖片連結
<div class="content">
    <img src="https://www.w3schools.com/css/img_forest.jpg" alt="">
</div>
img{
    display: block;
  margin: 0 auto;
}
  • 於 css background中載入背景連結
<div class="content"></div>
.content{
    background:url(https://www.w3schools.com/css/img_forest.jpg) no-repeat;
    width: 600px;
    height: 400px;
    margin: 0 auto;
}

上一篇
HTML&CSS|使用css變更html標籤特性
下一篇
HTML&CSS| 選單使用float呈現方式
系列文
網頁排版個人學習筆記30

尚未有邦友留言

立即登入留言