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 是扣掉內容高後，在平均分配剩餘值，所以已可用來垂直置中