[note]大小不固定的图片、多行文字的水平垂直居中

ztyzz 发布于2019-08-30 13:21 / 1985人阅读

摘要：大小不固定的图片多行文字的水平垂直居中方式不固定大小的图片是现代浏览器中实现图片垂直居中比较方便的方法增加一个高度等于图片容器的高的空标签，设置结构多行文字不支持的版本外层不能浮动如空标签跟上面一种方法类似，这里

大小不固定的图片、多行文字的水平垂直居中 display:table-cell+display:inline方式 不固定大小的图片

display:table,vertical-align:middle是现代浏览器中实现图片垂直居中比较方便的方法
IE6-7 hack：增加一个高度等于图片容器的高的空标签height: 100%，设置vertical-align: middle

html结构：ul>li>a>img+span

.img-list {
  a {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
}
// if lt IE 8
.img-list {
  _height: 0;
  *zoom: 1;
  a {
    display: block;
  }
  span {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
}

http://codepen.io/zplus/pen/z...

多行文字

不支持

外层不能浮动（如 ~~.demo {float: left}~~)

.demo {
  display: table-cell;
  vertical-align: middle;
}
span {
  display: inline-block;
}

http://codepen.io/zplus/pen/w...

空标签

跟上面一种方法类似，这里直接使用空标签设置display: inline-block; vertical-align: middle; height: 100%来触发垂直居中

html结构：ul>li>a>img+span

.img-list {
  a {
    font-size: 0;
  }
  img {
    vertical-align: middle;
  }
  span {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 1;
  }
}

http://codepen.io/zplus/pen/e...

参考链接

CSS制作图片水平垂直居中
大小不固定的图片、多行文字的水平垂直居中

GPU云服务器云服务器水平垂直居中固定垂直居中文字垂直居中 html使文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115500.html

CSS水平或垂直居中技巧

摘要：适用情景单对象水平居中原理将子元素设置块级表格，再设置水平居中。结语有些是水平居中，有些是垂直居中，将它们某两个合在一起就能实现水平和垂直均居中。前言 css水平和垂直居中是一个亘古不变的话题，它常常出现在优美的网页上以及各大前端面试当中。说来惭愧，在两年前面试的时候，我完全不知道如何做到水平和垂直均居中的方法，那场面别提有多尴尬了（ps：特想找个地洞钻进去）。。。时隔两年，对于这个...

CastlePeaK 2019-08-30 11:22 评论0 收藏0
vertical-align属性与垂直居中

摘要：方法二利用，设置元素结构，并应用实现垂直居中，这种方法的实现可用于多行文本，要求及以上版本。让元素居中对齐是非常常见的需求，首先是水平居中，要实现水平居中行内元素只需要在其父元素上设置text-align: center即可，对于块级元素来说让它的margin-left: auto和margin-right: auto即可（width不可为auto），那么垂直居中呢？找下css属性发...

bergwhite 2019-08-28 18:11 评论0 收藏0
从一个内联元素布局引发对line-height的探讨

摘要：从一个内联元素布局引发对的探讨一前言这个属性对于各位前端的小伙伴来说并不陌生。对于块级元素，它指定元素行盒的最小高度。对于非替代的元素，它用于计算行盒的高度。如存在属性的六总结以上就是本人对行内布局以及的一些思考总结。从一个内联元素布局引发对line-height的探讨一、前言 line-height这个属性对于各位前端的小伙伴来说并不陌生。在之前写页面的时候碰到过一个该属性相关的...

seal_de 2019-08-02 15:37 评论0 收藏0