div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助

div设置成float之后,在父div中设置text-align:center,就无法使子div居中显示了,不过我们可以使用变通的方法达到这一效果,就是在父div上再套一个div,如下:

复制代码

代码如下:



<div id="outerdiv" style="text-align:center;">

<div id="containerdiv" style="overflow:hidden; display:inliine-block;">  /*display必须设置成inline-block*/

<div id="float1" style="float:left;"> </div>

<div id="float2" style="float:left;"> </div>

</div>

</div>

这样containerdiv就会在outerdiv的中间显示了。

让几个横向排列的浮动子div居中显示的方法的更多相关文章

  1. 如何在一个div中使其子div居中

    网上其他地方已讲述过对其的不同实现方式,今天主要做一个详细的汇总,希望对大家有帮助. ps:我面试的时候就被问到过这个问题,当时都回答错了,蓝瘦. 假设父div的类名为father,子div的类名为s ...

  2. 设置此div的子元素居中显示

    下面样式设置到父div上: .modal { display: flex; align-items: center; /*竖直居中 垂直居中*/ justify-content: center; /* ...

  3. 横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法

    最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子d ...

  4. css ul li 横向排列

    因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建 ...

  5. ul li横向排列及圆点处理

    如何用CSS制作横向菜单 让ul li横向排列及圆点处理   第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...

  6. 如何定义让两个div横向排列

    方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...

  7. 如何让div横向排列

    方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...

  8. HTML+CSS-如何定义让两个div横向排列

    方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...

  9. div横向排列

    在网页布局中,常常有几个div横向排列的需求,此时,可以采用浮动的方式: 1.左右浮动: <div class="main"> <div class=" ...

随机推荐

  1. UVA - 1614 Hell on the Markets(奇怪的股市)(贪心)

    题意:输入一个长度为n(n<=100000)的序列a,满足1<=ai<=i,要求确定每个数的正负号,使得所有数的总和为0. 分析: 1.若总和为0,则未加符号之前,所有数之和必为偶数 ...

  2. MySQL8.0安装caching_sha2_password问题

    MySQL安装之后无法用工具连接上本地数据库 详情原因可见: https://mysqlserverteam.com/mysql-8-0-4-new-default-authentication-pl ...

  3. oracle(3)select语句中常用的关键字说明

    1.select 查询表中的数据 select * from stu: ---查询stu表所有的数据,*代表所有2.dual ,伪表,要查询的数据不存在任何表中时使用 select sysdate f ...

  4. PHP中Cookie与Session的异同以及使用

    Cookie与Session的异同: 一.cookie机制 Cookies是服务器在本地机器上存储的小段文本并随每一个请求发送至同一个服务器.IETF RFC 2965 HTTP State Mana ...

  5. Sublime Text与LaTeX的结合

    1.通过Command Palette安装LaTeXTools 2.通过Command Palette查找LaTeXTools: Reconfigure and migrate settings,回车

  6. SpringBoot 系列教程之编程式事务使用姿势介绍篇

    SpringBoot 系列教程之编程式事务使用姿势介绍篇 前面介绍的几篇事务的博文,主要是利用@Transactional注解的声明式使用姿势,其好处在于使用简单,侵入性低,可辨识性高(一看就知道使用 ...

  7. SpringMVC使用可以访问静态资源,但是导致Controller访问失败

    如果在web.xml 拦截配置如下: <!-- Spring MVC servlet --> <servlet> <servlet-name>SpringMVC&l ...

  8. iOS延迟执行方法

    swift 4.0中dispatch_async,dispatch_after的使用 2018年03月28日 16:15:44 xiao_yuly 阅读数:3576 版权声明:本文为博主原创文章,未经 ...

  9. NCRE Java二级备考方案

    一 配合大纲梳理基本知识点 二 多在233网校刷题

  10. 51nod 1284:2 3 5 7的倍数 容斥原理

    1284 2 3 5 7的倍数 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 给出一个数N,求1至N中,有多少个数不是2 3 5 7的倍数. 例如N ...