十九、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>
相关推荐
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
风尚云网6 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
酷酷的威朗普9 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
渊兮兮9 小时前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画
土豆湿10 小时前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
鸽鸽程序猿13 小时前
【前端】CSS
前端·css
爱上语文1 天前
HTML和CSS 表单、表格练习
前端·css·html
小肚肚肚肚肚哦1 天前
盘点浏览器盒模型中各种 width、height 、边距和位置属性
css·html
NightCyberpunk1 天前
HTML、CSS
前端·css·html
南城FE1 天前
12个更现代化的CSS单行优化技巧
前端·css