问题描述:
基本的html结构:
<div>
<!--
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
</div>
 

欲实现效果:

 浮动元素居中的出现条件:

*1.首先是内部元素需要设置宽高
*2.元素需要同行显示
*3.元素需要居中
分析:如果想对一个元素设置宽高,那么元素类型就不能够是行内元素,只能够是块状元素)
*如果内部开始为块状元素时,如p元素,只能使用float使其同行显示(float又会改变显示模式),但如果进行居中处理,则会发现margin:0 auto;属性失效
*如果内部初始为行内元素,因为不能设置宽高,势必会将其转化为块状元素,即display:block;然后float:left,此时发现父级元素的text-align:center居中属性也失效了
 
 
 
 
解决方案:

当HTML结构如下所示:

<div id="container">
<div class="left">left</div>
</div>
同时,CSS这样写:
#container{
width:400px;
height:110px;
border:1px solid black;
}
#container div{
width:100px;
height:100px;
float:left;
margin:0 auto;
}
效果如下:

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

解决方法很简单:在浮动元素外面再嵌套一层div,代码如下:

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

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

需要注意的是,浮动元素外层嵌套的div宽度应该设置为浮动元素的宽度之和,否则无法实现真正的水平居中。

这个方法的缺点是其可扩展性较差,如果浮动元素的个数发生了改变,则需要对.content这个样式里的width进行修改.

用CSS 实现 浮动元素的 水平居中的更多相关文章

  1. css让浮动元素水平居中

    对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中. 对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题.如下: HTML 代码: <div class=&q ...

  2. CSS浮动元素的水平居中

    方法一: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

  3. CSS围住浮动元素的三种方法

    浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它.浮动会“扩散”到下一个清除浮动的元素处.这会引起不想要的页面布局效果. 清除浮动的方法有三种: 1.父元素overflow:hidden 2. ...

  4. CSS之浮动元素

    <html> <head> <meta charset="utf-8"> <title></title> <sty ...

  5. 用CSS 实现 非浮动元素的 水平居中/垂直居中/水平垂直居中

    一.水平居中 (1)行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可:   .parent { text-align:center ...

  6. 【CSS】3种CSS方法设置元素垂直水平居中

    1. 宽高固定 设置要水平垂直居中的 div 的 position 为 absolute,left:50%; margin-left为负的这个元素宽度的一半,同理,top:50%;margin-top ...

  7. CSS布局:元素水平居中

    CSS布局之元素水平居中 本文将依次介绍在不同条件下实现水平居中多种方法 一.使用 text-align: center : 适用于块级元素内部的行内元素水平居中(也适用于图片的水平居中) 此方法对i ...

  8. CSS中不定宽块状元素的水平居中显示

    CSS中不定宽块状元素的水平居中显示 慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中 ...

  9. HTML。CSS浮动元素详解

    浮动定位是指 1.1将元素排除在普通流之外,即元素将脱离标准文档流 1.2元素将不在页面占用空间 1.3将浮动元素放置在包含框的左边或者右边 1.4浮动元素依旧位于包含框之内 2. 浮动的框可以向左或 ...

随机推荐

  1. 克隆指定的分支:git clone -b 分支名仓库地址

    克隆指定的分支:git clone -b 分支名仓库地址 git clone -b 分支名 仓库地址 -b 是在克隆的时候制定一个分支

  2. 微信小程序之一:动态添加view(view包含picker,input)

    <view wx:for="{{array}}" wx:key="this" class="borderContainer"> ...

  3. linux c基础技巧

    C语言:向文件末尾进行追加数据https://blog.csdn.net/qq_31243065/article/details/82354557 https://zhidao.baidu.com/q ...

  4. Centos7.5 添加环境变量并生效

    配置环境变量用户 jiangshan为例(base) [jiangshan@localhost ~]$ export PATH=$PATH:/usr/local/MATLAB/R2014a/bin/( ...

  5. Nginx启动和停止

    启动nginx [root@LinuxServer sbin]#  /usr/local/nginx/sbin/nginx     -c     /usr/local/nginx/conf/nginx ...

  6. Ubuntu bashrc profile environment 区别

    在 Ubuntu 中有如下几个文件可以设置环境变量: /etc/profile:在登录时,操作系统定制用户环境时使用的第一个文件,此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行. ...

  7. QT加载自带字体

    #include <QCoreApplication> #include <QStringList> #include <QFontDatabase> #inclu ...

  8. 『Python基础』第39节 函数的返回值

    1. 函数的返回值 ​ 一个函数就是封装一个功能, 这个功能一般都会有一个最终结果的. ​ 比如写一个登录的函数, 最终登录是否成功你总得告诉我一声吧? ​ 还有咱们之前也用过 len() 这个函数, ...

  9. Codeforces Round #222 (Div. 1) (ABCDE)

    377A Maze 大意: 给定棋盘, 保证初始所有白格连通, 求将$k$个白格变为黑格, 使得白格仍然连通. $dfs$回溯时删除即可. #include <iostream> #inc ...

  10. hdu 1045 要求全部逐一搜索完的深搜

    #include<stdio.h> #include<string.h> int visit[10][10]; char map[10][10]; int n,ans,ss,t ...