HTML+CSS宝典 CSS进阶行盒的垂直对齐

多个行盒垂直方向上的对齐

1、怎么解决文字和多选框没有对齐

给没有对齐的元素设置 vertical-align 属性，这里给 input 属性设置 vertical-align: middle

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直对齐</title>
<style>
  input[type="checkbox"]{
    width: 30px;
    height: 30px;
  }
</style>
</head>
<body>

  <p>
    <input type="checkbox" style="vertical-align: middle; ">
    <span>我同意</span>
  </p>

</body>
</html>

input 自己的位置变化了，导致与文字之间的相对位置也变化了，所以看上去是文字变化了

我同意

除了预设值还可以设置数值，调整到合适的位置

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直对齐</title>
<style>
  input[type="checkbox"]{
    width: 30px;
    height: 30px;
  }
</style>
</head>
<body>

<p>
  <input type="checkbox" style="vertical-align:-9px; ">
  <span>我同意</span>
</p>

</body>
</html>

我同意

2、文字和图片对齐怎么调整呢？

可以设置图片img元素，也可以设置span元素都可以，两行行盒任选一个调整

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直对齐</title>
<style>
</style>
</head>
<body>

<p>
  <img src="http://www.ruyic.com/blog/uploads/image/202202/164605771322963.png" alt="">
  <span style="vertical-align: 17px;">请联系我</span>
</p>

</body>
</html>

这里设置 span 元素 vertical-align 属性

请联系我

对比不设置的 vertical-align 属性的，图片的基线在下边缘，文字的基线和图片的基线对齐的效果

请联系我

3、关于图片底部白边

白边发生在图片的父元素是一个块盒，块盒的高度是自动的，图片底部和父元素之间会出现空白，父元素设置的字体越大白边越大

一般有两种解决办法

第一种：设置父元素字体大小为0 font-size: 0 ，副作用是父元素里有文字就看不见了

第二种：img元素设置为块盒 display: block ，最常见的就是这种方法

HTML+CSS宝典 CSS进阶 行盒的垂直对齐

1、怎么解决文字和多选框没有对齐

2、文字和图片对齐怎么调整呢？

3、关于图片底部白边