[CSS] vertical-align

vertical-align

vertical-align CSS 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정.

 

vertical-align: baseline;

부모의 baseline에 맞추어 해당 엘리먼트의 baseline 을 정렬

---

vertical-align: top;

해당 엘리먼트의 top을 부모 엘리먼트 폰트의 top으로 정렬

---

vertical-align: middle;

해당 엘리먼트의 middle을 부모의 baseline + x-height / 2 로 정렬

---

vertical-align: bottom;

vertical-align: sub;

해당 엘리먼트의 baseline을 부모의 subscript-baseline으로 정렬

---

vertical-align: text-top;

해당 엘리먼트의 top을 부모 엘리먼트 폰트의 top으로 정렬

---

인라인 요소의 상자를 선 상자를 포함해 자기 자신 안에 수직으로 정렬.

텍스트 줄에 이미지를 세로로 배치하는 데 사용할 수 있다!!

 

인라인 요소 (필요한 만큼만 너비를 가지는 요소) 에는 !!

• <a>
• <abbr>
• <acronym>
• <b>
• <bdo>
• <big>
• <br>
• <button>
• <cite>
• <code>
• <dfn>
• <em>
• <i>
• <img>
• <input>
• <kbd>
• <label>
• <map>
• <object>
• <output>
• <q>
• <samp>
• <script>
• <select>
• <small>
• <span>
• <strong>
• <sub>
• <sup>
• <textarea>
• <time>
• <tt>
• <var>이렇게나 많다....

 

 

 

 

 

음.. 필수적으로 기억할 것은...

• <a>
• <br>
• <button>
• <i>
• <img>
• <span>

이 정도만해도 될 것 같다..