文本内图像的垂直对齐LOGIN
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）

文本内图像的垂直对齐

此例演示：

如何设置文本的垂直对齐图像。

实例解析：

vertical-align属性设置一个元素的垂直对齐方式。

说明：该vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

可以设置以下属性值：

　●　baseline：默认值，元素放置在父元素的基线上。    

　●　sub：垂直对齐文本的下标。    

　●　super：垂直对齐文本的上标    

　●　top：把元素的顶端与行中最高元素的顶端对齐    

　●　text-top：把元素的顶端与父元素字体的顶端对齐    

　●　middle：把此元素放置在父元素的中部。    

　●　bottom：把元素的底端与行中最低的元素的顶端对齐。    

　●　text-bottom：把元素的底端与父元素字体的底端对齐。    

　●　length：

　●　%：使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。    


nächsten Abschnitt
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> img.top {vertical-align:text-top;} img.bottom {vertical-align:text-bottom;} </style> </head> <body> <p>一个<img src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="w3cschool" width="150" height="50" />默认对齐的图像。</p> <p>一个<img class="top" src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="w3cschool" width="150" height="50" /> text-top 对齐的图像。</p> <p>一个<img class="bottom" src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="w3cschool" width="150" height="50" /> text-bottom 对齐的图像。</p> </body> </html>
einreichenCode zurücksetzen
KapitelKursunterlagen