- Block-level elements with width are aligned in the center, margin: 0 auto;
- To align the text in the center is text-align: center;
vertical-align: vertical alignment, it is only for the elements in the row or rows within the block elements
By default, the picture will be aligned with the baseline of the text, as shown in the figure: After
setting vertical-align:
remove the gaps on the bottom side of the picture.
Reason: In-line block elements such as pictures or forms, its bottom line will be aligned with the baseline of the parent box.
There will be a blank gap on the bottom side of the picture.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
border: 1px solid red;
}
img {
width: 100px;
/*不与基线对齐，即可*/
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<img src="imgs/cat.jpg" alt="">
<span>loveyou爱你</span>
</div>
</body>
</html>
effect:
