十九、CSS 布局之元素垂直对齐方式

浏览器 文字类型 元素排版中,存在用于对齐的 基线 ,一般情况下,默认是基线对齐,这就会产生一些元素对不齐、有缝隙之类的问题,面对这些问题,我们可以用垂直对齐方式来解决。

垂直对齐方式

我们在设置图文样式的时候,可以发现,当图片和文字在一行中显示时,其实它们的底部是不对齐的,对于这类问题,可以用 垂直对齐 方式来解决。

垂直对齐方式可以解决 行内 / 行内块 元素的垂直对齐问题,其属性名是 vertical-align,它有 4 个属性值:

  • baseline :基线对齐,默认值
  • top :顶部对齐
  • middle :中部对齐
  • bottom :底部对齐

项目中 vertical-align 可以解决的问题

(1)文本框和表单按钮无法对齐问题

可以看到下例中,搜索按钮稍微有点上移,与输入框没有对齐:

HTML 复制代码
  <body>
    <input type="text" />
    <input type="button" value="搜索" />
  </body>
  
      <style>
      input {
        height: 60px;
        box-sizing: border-box;
      }
    </style>

在上例基础上,给元素设置垂直对齐方式:中部对齐

HTML 复制代码
  <body>
    <input type="text" />
    <input type="button" value="搜索" />
  </body>
  
    <style>
      input {
        height: 60px;
        box-sizing: border-box;
        vertical-align: bottom;
      }
    </style>

(2)input 系列和 img 图片无法对齐问题

HTML 复制代码
  <body>
    <img src="./beijing1.jpeg" alt="">
    <input type="text" />
  </body>
  
   <style>
      input {
        height: 60px;
        box-sizing: border-box;
      }
      img{
        width: 120px;
        height: 120px;
      }
    </style>

给 img 标签设置垂直对齐:以底部垂直为例

HTML 复制代码
  <body>
    <img src="./beijing1.jpeg" alt="">
    <input type="text" />
  </body>

    <style>
      input {
        height: 60px;
        box-sizing: border-box;
      }
      img{
        width: 120px;
        height: 120px;
        vertical-align: bottom;
      }
    </style>

(3)div 中的文本框无法贴顶问题

HTML 复制代码
    <style>
      div {
        width: 240px;
        height: 80px;
        background-color: rgb(51, 242, 30);
      }
    </style>

  <body>
    <div>
      <input type="text" />
    </div>
  </body>

给输入框设置垂直对齐方式:顶部对齐

HTML 复制代码
    <style>
      div {
        width: 240px;
        height: 80px;
        background-color: rgb(51, 242, 30);
      }
      input{
        vertical-align: top;
      }
    </style>
  </head>
  <body>
    <div>
      <input type="text" />
    </div>
  </body>

(4)div 不设置高度,由图片撑开,此时图片标签下面会存在额外间隙问题

HTML 复制代码
    <style>
      div {
        width: 240px;
        background-color: rgb(51, 242, 30);
      }
      img{
       width: 100px;
       height: 100px;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="./beijing1.jpeg" alt="背景">
    </div>
  </body>

给图片设置垂直对齐方式:中间对齐

HTML 复制代码
    <style>
      div {
        width: 240px;
        background-color: rgb(51, 242, 30);
      }
      img{
        vertical-align: middle;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="./beijing1.jpeg" alt="背景">
    </div>
  </body>

浏览器会把行内标签和行内块标签当作文字处理,默认是基线对齐,对于上面的示例,还可以将图片标签转换成块级标签来实现,效果相同:

(5)使用行内高让图片标签居中问题

HTML 复制代码
    <style>
      div {
        width: 240px;
        height: 200px;
        line-height: 200px;
        background-color: rgb(51, 242, 30);
      }
      img {
        width: 100px;
        height: 80px;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="./beijing1.jpeg" alt="背景" />
    </div>
  </body>

给图片设置垂直对齐方式:中间对齐

HTML 复制代码
    <style>
      div {
        width: 240px;
        height: 200px;
        line-height: 200px;
        background-color: rgb(51, 242, 30);
      }
      img {
        vertical-align: middle;
        width: 100px;
        height: 80px;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="./beijing1.jpeg" alt="背景" />
    </div>
  </body>

(6)水平、垂直都居中

HTML 复制代码
    <style>
      div {
        text-align: center;
        width: 240px;
        height: 200px;
        line-height: 200px;
        background-color: rgb(51, 242, 30);
      }
      img {
        vertical-align: middle;
        width: 100px;
        height: 80px;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="./beijing1.jpeg" alt="背景" />
    </div>
  </body>
相关推荐
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
Justinc.2 小时前
CSS3新增边框属性(五)
前端·css·css3
fruge2 小时前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
As977_2 小时前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189112 小时前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
我要洋人死5 小时前
导航栏及下拉菜单的实现
前端·css·css3
小白白一枚11116 小时前
css实现div被图片撑开
前端·css
@蒙面大虾16 小时前
CSS综合练习——懒羊羊网页设计
前端·css
顾菁寒17 小时前
WEB第二次作业
前端·css·html
前端Hardy1 天前
HTML&CSS:爱上班的猫咪
前端·javascript·css·vue.js·html