CSS垂直对齐vertical-align

本文概述

  • 它能做什么
  • CSS垂直对齐值
  • CSS垂直对齐示例
【CSS垂直对齐vertical-align】CSS垂直对齐方式属性用于定义嵌入式或表格单元格框的垂直对齐方式。它是CSS的不言自明的特性之一。对于初学者来说, 这不是一件容易的事情。
它能做什么
  1. 它应用于内联或内联块元素。
  2. 它影响元素的对齐方式, 而不影响其内容。 (表格单元格除外)
  3. 当将其应用于表格单元格时, 它将影响单元格的内容, 而不是单元格本身。
CSS垂直对齐值
描述
baseline 它将元素的基线与父元素的基线对齐。这是默认值。
length 用于将元素的长度增加或减少指定的长度。也可以使用负值。
% 它用于按“行高”属性的百分比增加或减少元素。允许为负值。
sub 对齐元素, 就好像它是下标一样。
super 它对齐元素, 就好像它是上标一样。
top 它将元素的顶部与直线上最高元素的顶部对齐。
bottom 它将元素的底部与该行上的最低元素对齐。
text-top 元素的顶部与父元素的字体的顶部对齐。
middle 元素放置在父元素的中间。
text-bottom 元素的底部与父元素的字体的底部对齐。
initial 它将此属性设置为其默认值。
inherit 从其父元素继承此属性。
CSS垂直对齐示例
< !DOCTYPE html> < html> < head> < style> img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } < /style> < /head> < body> < p> < img src="http://www.srcmini.com/good-morning.jpg" alt="Good Morning Friends"/> This is an image with a default alignment.< /p> < p> < img src="http://www.srcmini.com/good-morning.jpg" class="top" alt="Good Morning Friends"/> This is an image with a text-top alignment.< /p> < p> < img src="http://www.srcmini.com/good-morning.jpg" class="bottom" alt="Good Morning Friends"/> This is an image with a text-bottom alignment.< /p> < /body> < /html>

输出:
这是具有默认对齐方式的图像。
这是文本顶部对齐的图像。
这是具有文本底部对齐方式的图像。

    推荐阅读