css如何让图片和文字垂直居中对齐


本文摘自PHP中文网,作者V,侵删。

css让图片和文字垂直居中对齐的方法:可以通过flex布局来实现,如【display: -webkit-flex;】。flex布局即弹性布局,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局。

可以使用flex布局实现居中(更简单,不支持IE9)。

(学习视频推荐:css视频教程)

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

1

2

3

4

.box

{

  display: flex;

}

行内元素也可以使用 Flex 布局。

1

2

3

4

.box

{

  display: inline-flex;

}

Webkit 内核的浏览器,必须加上-webkit前缀。

1

2

3

4

5

.box

{

  display: -webkit-flex; /* Safari */

  display: flex;

}

注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。

阅读剩余部分

相关阅读 >>

html代码如何让照片变模糊

css怎么实现文字横排

怎么在html中隐藏一段文字

css精灵图怎么定位

css可以用什么软件

css中用什么属性来定义盒的类型

css浮动的属性是什么

怎么用css设置字体颜色

css有哪些属性不继承父级的

css中的浮动属性值有哪些

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...