iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 11
0
自我挑戰組

前端菜焦阿日記系列 第 11

|D11| CSS - 文字和inline垂直置中

tags: 2019年鐵人賽css

前言

置中屬性百百種(例如 margin:0 auto; ),到底這些置中差別在哪?

去看定義就知道了!

使用屬性

這些是我對文字或 inline 元素排版時會用的屬性

  • text-aline

    摘自w3org-wiki
    The text-align property describes how inline-level content of a block container is aligned.

  • line-height

    摘自w3org-wiki
    On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element.

    On a non-replaced inline element, 'line-height' specifies the height that is used in the calculation of the line box height.

  • vertical-align

    摘自w3.org-wiki
    The vertical-align property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

水平置中排版

  • text-aline

範例:對文字置中

<div class="word">Sphinx</div>
.word{
  height: 100px;
  outline:1px solid;
  text-align:center;
}

範例2:對 inline 元素置中

<div class="box">
  <a href="">one</a>
  <a href="">two</a>
  <a href="">three</a>
  <a href="">four</a>
</div>
.box{
  margin:20px;
  outline:1px solid;
  text-align:center;
  height: 65px;
}

垂直排版

vertical-align

還記得以前英文單字簿都有線讓我們寫字工整,在排版也是有隱形的線在對齊。

圖片來源:wikipedia

這裡介紹文字在CSS的4條線

  • top
  • middle
  • baseline
  • bottom

vertical-align 在默認情況下是對齊 baseline

範例:

<div class="box2">
  <img src="http://placekitten.com/100/100">
  <a href="">one</a>
  <a href="">two</a>
  <a href="">three</a>
  <a href="">four</a>
</div>
.box2{
  outline:1px solid;
  text-align:center;
  background-color: pink;
}
  1. 默認情況下(baseline)
    inline 元素與父層底部會有空隙是因為 baseline 下面還有一條 bottom

  2. 加上vertical-align:middle
    可以看到所有子元素都對齊 middle

line-height

行高顧名思義就是行的高度,但它是怎麼分配值呢?

範例

<div class="box">
  <a href="">one</a>
  <a href="">two</a>
  <a href="">three</a>
  <a href="">four</a>
</div>
.box{
  outline:1px solid;
  text-align:center;
}
  1. 未設定行高

  2. 加上 line-height:100px;
    可以看到 line-height 是扣掉內容高後,在平均分配剩餘值,所以已可用來垂直置中


上一篇
|D10| Web Server - 跨域請求
下一篇
|D12| CSS - Margin collapse
系列文
前端菜焦阿日記30

尚未有邦友留言

立即登入留言