美文网首页CSS
如何实现浮动元素水平居中(三种方法)

如何实现浮动元素水平居中(三种方法)

作者: kismetajun | 来源:发表于2018-07-14 17:58 被阅读60次

当HTML结构如下所示:

同时,CSS这样写:

效果如下:

很明显,图片并没有水平居中。这是因为浮动元素脱离了普通文档流,margin:0 auto也就不起作用了。

解决方法很简单:

方法一:

在浮动元素外面再嵌套一层div,代码如下:

此时,浮动元素就可以水平居中了:

同样地,对于多个浮动元素,也可以用这种方法实现水平居中,效果如下:

方法二:

浮动元素水平居中-----宽度不固定的浮动元素

html代码

CSS样式

方法三:

浮动元素水平居中-----宽度固定的互动元素

html代码

css代码

相关文章

  • 如何实现浮动元素水平居中(三种方法)

    当HTML结构如下所示: 同时,CSS这样写: 很明显,图片并没有水平居中。这是因为浮动元素脱离了普通文档流,ma...

  • 实现水平居中的办法

    原文 博客原文 大纲 1、margin和width实现水平居中2、inline-block实现水平居中方法3、浮动...

  • CSS实现水平垂直的几种方法

    目录 水平居中 垂直居中 水平垂直居 一、水平居中 内联元素和块级元素实现水平居中的方法不一样,其中块级元素又分定...

  • 居中大法

    水平居中 行内元素水平居中给它的父级元素设置 块级元素水平居中给该元素设置margin值 子元素有浮动对父元素进行...

  • day04

    今天我学到了什么 1.盒子模型 2、浮动float 3、如何清除浮动 4定位 5、实现元素的垂直水平居中 6、CS...

  • CSS系列篇:居中的实现以及使用场景

    前言 总结实现水平方向、垂直方向的元素居中的方法以及应用场景。 一、水平居中 场景:行内元素的水平居中——在父元素...

  • 用CSS实现元素居中的N种方法

    网页布局中,元素水平居中比垂直居中简单不少,同时实现水平垂直居中也不难,难的是想出多种实现水平垂直居中的方法并从中...

  • 网页布局各种居中问题的详解

    水平居中 行内元素水平居中 块级元素水平居中 多个块级元素水平居中 解决方法之一: 解决方法之二: 垂直居中 单行...

  • CSS相关

    居中 块元素水平居中 行内元素水平居中 模拟表格 实现水平居中display:table ( ) | table-...

  • css8种垂直方法,8种水平方法

    水平居中 1.行内元素 2.块级元素 方法1: 方法2:父类应用width:fit-content,子类浮动 方法...

网友评论

    本文标题:如何实现浮动元素水平居中(三种方法)

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