CSS属性文本的垂直对齐方式与图片文字对齐。

2022年6月21日 257次阅读 来源: 云杰8了

line-height属性（单行文字与多行文字对齐）

行高居中原理就是在文字外边加一个margin，字体带下
1、 如果在一个盒子中只有一行行内元素，或者文字。字体大小为默认大小，所有文字默认居中对齐。
使用行高=盒子高度可让内部的行内元素垂直对齐。
《CSS属性文本的垂直对齐方式与图片文字对齐。》

 <style> .center {  width: 1000px; line-height: 48px; height: 48px; border: 3px solid green; text-align: center; } </style>
    <div class="center">我是垂直居中的 AAA aaa</div>

2.多行文字居中对齐。

  • 我们最好在容器中加一个文本标签p。
  • 仔细分析下边代码你会发现。
  • center的行高本来是有继承性的，在p单独设置完行高以后。
  • p每一行的字体高度为字体大小12px乘以设置的行高1.5等于18，
  • 然后每行都有一个上下的margin12.由于外间距合并，
  • 文字只有最外边的margin上下12.
  • 然后在设置vertical-align: middle; 把此元素放置在父元素的中部。
  • 所以多行文字会居中对齐。
 <style> .center {  font-size: 12px; line-height: 200px; height: 200px; border: 3px solid green; text-align: center; } .center p {  line-height: 1.5; display: inline-block; vertical-align: middle; } </style>
    <div class="center">
        <p>我是垂直居中的是垂直居中的是垂直居中的是垂直居中的是垂直居中的是垂直居是垂直居中的是垂直居是垂是垂直居中的是是垂直居中的是垂直居中的是垂直居中的是垂直居中是垂直居中的是垂直居中的是垂直居中的是垂直居中的是垂直居中的是垂直居中的是垂直居中的是垂直居中的的是垂直居中的是垂直居中的是垂直居中的是垂直居中的是垂直居中的是垂直居中的是垂直居中的是垂直居中的是垂直居中的是垂直居中的是垂直居中的垂直居中的是垂直居中的是垂直居中的直居中的是垂直居中的是垂直居中的是垂直居中的是垂直居中的是垂直居中的中的中的。</p>
    </div>

图片与单行文字对齐。

  1. 设置图片高度与盒子高度相同。
  2. 设置verticle-align：middle；元素位于父元素的中部。
<style> .center {  width: 1000px; font-size: 12px; height: 300px; border: 3px solid green; } img {  height: 300px; vertical-align: middle; } </style>
</head>

<body>
    <div class="center">
        <img src="./img/bc1.jpg" alt=""> <span>我是垂直居中的。我是垂直居中的。</span>
    </div>

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

① vertical-align属性应该设置到 行内元素上（行内块元素也可）

② 如果文字的总高度超出了 容器（这里是div）的高度，那么垂直居中会失效。

③ ie7以下 span结束标签和内部内容不能有间隔空白，也就是说span的结束标签和内部内容要连在一起。

图片与多行文字居中

1.利用line-height属性让盒子内容居中。图片基线会对齐盒子中部，因为默认是基线对齐。文字也是一样。

line-height: 600px;

2.font-size设置为0 ，去除空白节点，行内元素之间的间隙。

 font-size: 0;
  1. 给图片设置高度h200px，防止图片过大，超出盒子大小，设置vertical-align: middle;让图片与盒子垂直中心对齐。
  img { 
            vertical-align: middle;
            height: 200px;
        }

4.此时span是居中对齐，因为行高，设置 vertical-align: middle；

<!DOCTYPE html>
<html>

<head>
    <title>大小不固定图片垂直居中</title>
    <style type="text/css"> div {  width: 600px; height: 600px; font-size: 0; line-height: 600px; border: 3px solid green; } img {  vertical-align: middle; height: 200px; } span {  width: 200px; margin-left: 10px; font-size: 12px; line-height: 1.5; display: inline-block; vertical-align: middle; } </style>
</head>

<body>
    <div>
        <img src="./img/bc1.jpg" alt="">
        <span>从成都成都成都从成都成都成都从成都成都成都从成都成都成都从成都成都成都从成都成都成都从成都成都成都从成都成都成都</span>
    </div>
</body>

</html>
    原文作者：云杰8了
    原文地址: https://blog.csdn.net/weixin_50821119/article/details/111197329
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞