居中问题：line-height、基线

本文主要是介绍居中问题：line-height、基线，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

html5+CSS3的居中专题

完整链接：
https://pan.baidu.com/s/16IhFoBC2gNPZwosyS6UXxQ 密码: ft2j
–来自百度网盘超级会员V7的分享

居中问题

a. 行内元素

• 水平居中：父标签设置text-align:center，

• 垂直居中：父标签设置line-height值等于其高度height，如height:50px; line-height:50px;

b. 文本

• 水平居中：当前标签设置text-align:center

• 垂直居中：当前标签设置line-height值等于父标签的高度height

c. 块级元素

• 使用position属性。

  使用top、bottom、left、right，可以设置块元素距离上下左右的距离，设置transform:translateX(-50%)，可以让元素回撤X轴方向的当前块的50%。

  • 水平居中：position: absolute;left:50%; transform:translateX(-50%);

  • 垂直居中：position: absolute;top:50%;transform: translateY(-50%);

  • 同时居中：position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);

• 使用行内块display：inline-block，

  • 水平居中：父标签设置text-align:center，如下，点开可看代码1

  • 垂直居中：

    • 父标签设置line-height值等于父标签的高度height，注意，此时会出现基线问题（可以看3.0章节），如下：
    • 要在子元素中设置vertical-align:middle, 实现垂直居中。如下

  • 如代码示例，子元素box1设置为inline-block之后，就可以让父标签设置为text-align：center实现块级别元素的居中。使用vertical-align:middle实现垂直居中

• 使用margin可以设置

1. line-height

1.1 作用

使文本内容垂直居中。通俗理解，设置内容的行高，如果行高与容器高度一致，便可垂直居中，如:div元素中

<div class='container'>文本内容</div>

设置css样式为，div容器高度30px，文本内容高度也为30px，则可居中。

.container {height: 30px;line-height: 30px
}

1.2 原理

行高包含了内容、上间距和下间距。也可以说是两个基线之间的距离。

2. 基线问题

2.1 我遇到的基线问题

文本和图片、button在一块，使内容无法居中。

• 注意：文本内容和input标签是对齐。

• 将img和button看作inline-block行内块，对应开头块级元素的居中问题

• 其中，文本的基线和图片以及button的基线对齐了。

在默认样式中，设置如下:

.text-test {height: 70px;line-height: 70px;background-color: antiquewhite;}

<div class="text-test"><span>发疯的小孩 123123</span><img src="./images/seckill-icon.png" style="" alt=""><button style="width: 50px; height: 50px;"></button><input type="search" style="width: 100px; height: 40px; ">
</div>

如何解决，就要针对基线进行操作。

《基线问题的解决》

img标签和button标签的基线和文本的内容对齐，因此需要调整的是img和button的基线居中，

使用**：vertical-align: middle**;可以解决，如下：

img {vertical-align: middle;
}
button {vertical-align: middle;
}

从而，页面恢复正常

<div class="text-test"><span>发疯的小孩 123123</span><img src="./images/seckill-icon.png" style="vertical-align: middle;" alt=""><button style="width: 50px; height: 50px;vertical-align: middle;"></button><input type="search" style="width: 100px; height: 40px; ">
</div>

2.2 什么情况下会出现基线问题？

HTML 中的基线问题通常指的是在页面布局中，元素的基线（baseline）不对齐或错位，从而导致页面呈现出意外的效果。基线是用于对齐文本和其他行内元素的水平线，因此在设计页面时，正确地对齐基线是很重要的。

当特定标签与文本混排或布局时，可能会出现基线问题。以下是每个标签可能引发基线问题的一些示例：

1. <img>：假设你有一段文本与图片混排，但图片底部的基线与文本的基线不对齐，可能导致文本与图片之间的垂直间距不一致。

<p>This is some text <img src="example.jpg" alt="Example Image"> with an image.</p>

2. <input>：如果你的表单中包含文本和输入框，并且它们的基线不对齐，可能会导致表单布局看起来不整齐。

<label for="username">Username:</label>
<input type="text" id="username" name="username">

3. <textarea>：在一个包含文本和 <textarea> 的表单中，如果 <textarea> 的基线与周围文本的基线不对齐，可能会导致表单的外观不一致。

<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

4. <button>：如果你的按钮与周围文本不对齐，可能会导致按钮看起来脱离上下文。

<p>This is some text <button>Submit</button>.</p>

5. <select>：当 <select> 元素与周围文本不对齐时，可能会使表单布局看起来不一致。

<label for="cars">Choose a car:</label>
<select id="cars" name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option>
</select>

6. <iframe>：当你嵌入一个 <iframe> 时，如果 <iframe> 的基线与周围文本不对齐，可能会导致页面布局问题。

<p>This is some text <iframe src="https://example.com"></iframe>.</p>

这些示例展示了如何可能出现基线问题的情况。通常，通过调整 CSS 样式来对齐这些元素的基线是解决问题的方法之一。

3. Text-align

可以使容器中的文本内容居中显示，包括了文本和基本的行内元素，如span、img、button、input、a等标签

<div class="text-test" style="text-align: center;"><span>发疯的小孩 123123</span><img src="./images/seckill-icon.png" style="" alt=""><button style="width: 50px; height: 50px;"></button><input type="search" style="width: 100px; height: 40px;">
</div>

注意！！！text-align不能让块级元素居中，只能让块级元素的内容在当前块中居中，如

<div class="text-test" style="text-align: center;"><p style="width: 100px;height: 70px; border: 1px solid;">4234325235</p></div>

其中p标签继承了div标签的text-align：center，是的p标签的内容在p标签中居中了，

想让整个块居中，还是要用position属性

参考文献

• https://blog.csdn.net/qq_41880073/article/details/115025963

这篇关于居中问题：line-height、基线的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---