美文网首页海纳百川
vertical-align垂直居中

vertical-align垂直居中

作者: 凛冬已至_123 | 来源:发表于2018-07-10 13:01 被阅读0次

vertical-align居中注意点

  • vertical-align 属性设置元素的垂直对齐方式
  • 使用对象-划重点
  1. 行内元素(inline、inline-block)
  2. table-cell
  • 代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .box{
  width: 300px;
  height: 200px;
  border: 1px solid ;
  text-align: center;
}

.box:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
} 
.box img{
  vertical-align: middle;
  background: blue;
}
  </style>
</head>
  
<body>
  <div class="box">
    x
    <img src="https://cdn2.jianshu.io/assets/default_avatar/15-a7ac401939dd4df837e3bbf82abaa2a8.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120" width='100' height='100' alt="">
  </div>

</body>
</html>

效果图

效果图
  • 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表格中,这个属性会设置单元格框中的单元格内容的对齐方式。
  • 重点2-基线设置,不同的基线,对齐的效果不一样
    我把before去掉再看看
    去掉before
  • 下面看一下tabel-cell
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  .box{
  width: 300px;
  height: 200px;
  border: 1px solid ;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

/* .box:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}  */
/* .box img{
  vertical-align: middle;
  background: blue;
} */
  </style>
</head>  
<body>
  <div class="box">
    <img src="https://cdn2.jianshu.io/assets/default_avatar/15-a7ac401939dd4df837e3bbf82abaa2a8.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120" width='100' height='100' alt="">
  </div>
</body>
</html>
效果图
  • 垂直居中methods
    1.flex
div.parent{
  display:flex;
}
div.child{
  margin:auto;
}

相关文章

  • CSS综合

    编码规范 设置上下padding垂直居中 使用绝对定位垂直居中 使用vertical-align垂直居中 使用ta...

  • 垂直和水平问题

    1.垂直居中:vertical-align

  • 2019-08-28

    vertical-align 实现水平垂直居中

  • CSS 踩坑笔记

    居中 1. 文字居中 水平居中: text-align: center 垂直居中: vertical-align:...

  • vertical-align

    含义 vertical--垂直,align--居中,vertical-align:垂直居中 基本概念 属性 基线w...

  • 各种居中

    1- 水平居中 2-垂直居中 table-cell + vertical-align absolute + tr...

  • 图片垂直居中问题

    暂时先不讨论复合元素的垂直居中,本文分析单纯的行内元素的垂直居中。 属性:vertical-align: midd...

  • CSS 垂直居中、文字省略号

    一、vertical-align垂直居中 vertical-align 属性经常用于设置图片、表单(行内块元素)和...

  • 关于html元素垂直居中的总结

    html元素垂直居中的几种方式:文本居中可以用line-height、vertical-align:middle、...

  • div垂直居中方式

    1、verticle-align: middle 通过vertical-align:middle实现CSS垂直居中...

网友评论

    本文标题:vertical-align垂直居中

    本文链接:https://www.haomeiwen.com/subject/cyjfpftx.html