如何让加了float:left的div居中？-CSDN论坛

如何让加了float:left的div居中？

Web 开发 > HTML(CSS)

收藏回复

[问题点数：40分]

⋅如何让加了float:left的div居中？ 更多帖子 关注私信空间博客 Ixs3n7c 等级 本版专家分：0 结帖率 0%: <div class="div_1">
  <div style="float:left">图像1</div>
  <div style="float:left">图像2</div>
  <div style="float:left">图像3</div>
</div>

让div_1下面的图像居中，我想的办法是在div_1的外面再加一个div，然后让div_1居中
<div class="div_out">
   <div class="div_1">
     <div style="float:left">图像1</div>
     <div style="float:left">图像2</div>
     <div style="float:left">图像3</div>
   </div>
</div>

.div_out{text-align:center;}

但是，如果图像数量不固定那么div_1的宽度要随着图像div的数量而决定也就无法使用这种方法了。。。

有除了js以外的方法吗？

2014-07-09 11:52:52

点赞 1 只看楼主引用举报楼主收起

展开阅读全文

⋅[散分帖] web前端开发分享-css,js系列篇 ⋅[散分] 浏览器调试工具技巧分享 ⋅[散分] 如何在Webstorm/Phpstorm中设置连接FTP，并快速进行文件比较，上传下载，同步等操作 更多帖子 关注私信空间博客 豪情 等级 本版专家分：16250 勋章 黄花 2014年8月 Web 开发大版内专家分月排行榜第二 蓝花 2014年7月 Web 开发大版内专家分月排行榜第三



<style type="text/css">

    .div1{width: 1000px; height: 500px; border: 1px solid #000;}

    .div2{width: 300px; height: 200px; margin: 0 auto; background: red; float: left; position: relative; left: 50%; margin-left: -150px;}

</style>

    <div class="div1">

        <div class="div2"></div>

    </div>

2014-07-09 15:01:40

点赞只看TA 引用举报 #1得分 0

⋅多个Lable标签怎样依次绑定到数据库的同一字段的值并且显示出来 更多帖子 关注私信空间博客 书香卷气 等级 本版专家分：274

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

<!--

*{margin:0;padding:0;}

div{width:800px;border:solid 1px #000;padding:20px;margin:30px auto;text-align:center;}

p{display:inline-block;width:150px;height:150px;margin:10px;background:gray;color:#fff;}

-->

</style>

</head>



<body>



<div>

	<p>左边左边</p>

	<p>右边右边</p>

</div>

</body>

</html>

2014-07-09 20:34:49

点赞只看TA 引用举报 #2得分 0

⋅终于完成了小目标还是买不起房只能散分

⋅最近论坛页面体验很不好

⋅合上电脑发现四周空无一人突然有感而发

更多帖子

关注私信空间博客

KK3K2005

等级

本版专家分：51317

勋章

签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！

黄花 2013年11月 Web 开发大版内专家分月排行榜第二

蓝花 2013年10月 Web 开发大版内专家分月排行榜第三: <div class="div_1" style='text-align:center'>
<div style="display:inline-block">图像1</div>
<div style="display:inline-block">图像2</div>
<div style="display:inline-block">图像3</div>
</div>

2014-07-09 21:15:34

点赞只看TA 引用举报 #3得分 0

⋅求一些高质量的前端技术博客 ⋅求大神指点火狐下的一个问题。 ⋅求大神指点一下XML解析的问题！ 更多帖子 关注私信空间博客 张运领 等级 本版专家分：14820 勋章 黄花 2014年1月 Web 开发大版内专家分月排行榜第二 2013年12月 Web 开发大版内专家分月排行榜第二: 不要这样搞吧，float的本意就是为了让他们向边上靠齐的显示，你这里既然想要居中，干嘛还要使用float？

而且，过度的使用float并不好的。

2014-07-09 22:20:47

点赞只看TA 引用举报 #4得分 0

⋅纠结问题ftp下载 ⋅php获取jquery ajax传递的值，在php中怎么把这个值设置为全局变量 ⋅ueditor在CI框架中使用IE浏览器JS报错 更多帖子 关注私信空间博客 皓月长空 等级 本版专家分：1455: 关于图片位置调整还是用绝对定位来处理比较好，漂浮在精确位置处理很差的

2014-07-10 09:28:47

点赞只看TA 引用举报 #5得分 0

⋅此用户还没有发表过任何帖子 关注私信空间博客 紫紫紫紫紫紫紫紫紫紫紫紫霞 等级 本版专家分：43: <div class="div_out" style="text-align: center;">
   <div class="div_1" style="display: inline-block;">
     <div style="float:left;width: 50px;">图像1</div>
     <div style="float:left;width: 50px;">图像2</div>
     <div style="float:left;width: 50px;">图像3</div>
     <div style="float:left;width: 50px;">图像3</div>
     <div style="float:left;width: 50px;">图像3</div>
     <div style="float:left;width: 50px;">图像3</div>
   </div>
</div>

这样就可以了    我加了宽度是为了模仿img在里面的效果

2014-07-11 12:14:27

点赞只看TA 引用举报 #6得分 0

⋅16的遗愿之一，17年再出发 ⋅多人博客系统BlogEngine源码&建博经验分享 ⋅sp_executesql 是不是有性能問題？ 更多帖子 关注私信空间博客 弘毅致远 等级 本版专家分：2771: <div class="div_1" style='text-align:center;margin:0 auto;'>
<div style="display:inline-block">图像1</div>
<div style="display:inline-block">图像2</div>
<div style="display:inline-block">图像3</div>
</div>

2014-07-14 18:11:53

点赞 1 只看TA 引用举报 #7得分 0

⋅Linux C++读取GB2312编码的文本 ⋅C++多线程获取指针类型的返回值 ⋅多线程访问知识库 更多帖子 关注私信空间博客 叶落无痕0826 等级 本版专家分：0: div_1的margin:0 auto，这样试试！

2014-07-15 17:27:22

点赞只看TA 引用举报 #8得分 0

⋅请教easyui的datagrid控件根据条件合并单元格

⋅求各位分析下笔记本出什么问题了

⋅小菜求教css布局问题

更多帖子

关注私信空间博客

Yvonnebai

等级

本版专家分：0

勋章

签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！: margin:0 auto

2014-07-17 16:27:44

点赞只看TA 引用举报 #9得分 0

收起

收藏回复

Ixs3n7c

等级：

关注私信 TA的帖子

如何居中一个float：left的元素: 写过前端的小伙伴们都知道同一标签下，在浮动的情况下（float）无论怎么添加margin的属性都不会起作用。

让几个横向排列的浮动(float:left)的div居中显示。: div设置成float之后，在父div中设置text-align:center，就无法使子div居中显示了，不过我们可以使用变通的方法达到这一效果，就是在父div上再套一个div，如下：这样containerdiv就会在outerdiv的中间...

float:left的div在屏幕中自适应居中: 目标效果是，一排div都有float：left样式，水平排列，并希望它们处于屏幕的中间，办法是在div们的父级div加一个 display:inline-block 样式，父级的父级使用text-clign:center样式就可以了。代码如下： HTML ...

前端面试题 - 如何居中一个float:left的元素: 听起来很高端大气上档次的样子但是其实试了一下还是很简单第一种方法 .box { float: left; width: 100px; height: 100px; background: lightcoral; } <div clas

运用CSS实现float:center 居中浮动li: 大家知道，CSS有float:left和float:right，但能否实现float:center呢？水平居中浮动，当然是可以的，这里将介绍你实现方法。以下面的Li列表为例，我们要实现中间LI的居中浮动： 1 div i

3个div水平居中: div要横向排列就要用float，居中要用margin-left:auto;margin-right:auto,但是有float，这个margin-left:auto;margin-right:auto;就会出问题，所以就要在外围定义一个容器，在外围设置margin-left:auto;margin-right...

Div在设置了浮动的情况下水平居中: div为浮动后再去添加margin：auto

如何实现浮动元素水平居中: 浮动元素如何水平居中？margin:0 auto为什么不起作用？其实方法很简单，只需要在浮动元素外面再嵌套一层div，使嵌套的div宽度为浮动元素宽度之和，即可实现真正的水平居中。

DIV浮动居中的方法，float居中的方法: 在css层样式里浮动（float:）只能设计左和右，不能设置居中。自从换了ie8.0之后，我的博客中间的内容部分就靠到左边去了，在ie7和ie6的时代只需将外面方框的文本对齐方式设置为居中（text-align: center;），...

html居中的元素带有float属性: 如图，我要设置蓝色背景的div居中，同时我又想让右侧的select框出现在图中位置。如果设置div为margin:0 auto，则右边的select框出现在了下一行。如果设置div为float，则div元素又不居中了图中，蓝色背

css中div中的内容居中: 使用table包裹要居中的元素，因为table有自适应的设置然后将table居中即可。 */ table{ margin: 0px auto; }html中的代码这个内容是使用table自动居中的1 这个内容是使用...

td中的多个并排的div水平居中: td中的多个并排的div水平居中lin49940 参照了baihe107 同学在帮助别人的答案，“就是常见的位置宽度居中布局咯，可以使用传统的相对定位，不过这三个 div 需要外面增加两层 div 来辅助布局”

div居中和div内容居中: 要让div水平居中，那么除了设置css margin:0 auto外，还不能再设置float，不然将会导致div靠左（设置float:left）和div靠右（设置float:right）。 1、div布局居中实例代码 <!DOCTYPE html> <...

div css float浮动用法(left right): 在学习牛腩老师的视频中，很深刻的体会了浮动带来的效果的震撼，现在是对B/S这块...div+css中float认识及css float用法，DIV CSS float浮动知识用法与float浮动学习 Css样式的float浮动属性，用于设置标签对象（如：标

css让div居中显示: 绝对居中 .xx_div { position: absolute; /* left, right, bottom, top要和position一起使用，margin-*不用 */ top: 0; left: 0;...这样div框就会绝对显示在网页中间 ...浮动居中 ...float只有left和ri...

将float元素居中的几种办法: 在HTML+CSS布局中，元素的居中一直是定位非常重要的部分，今天第一天写博，就从这个让我比较头疼的定位布局开始吧~ 下面这些方法基本上是我在网上查阅资料以及自己的一些思考改良所得，不完全算是自己的原创。

div中有两个div,怎么设置一个居中，一个居右: float: left;text-align: right;width:60%;margin-left: 2%;">修改密码</div> <div style="float: right;text-align: right;width:38%;">关闭</div&...

BootStrap Div居中: 使用BootStrap，如果一个Div只占用了一小部分，怎么居中呢？ BootStrap3.3.2测试 .col-center-block { float: none; display: block; margin-left: auto; margin-right: auto; } 请登录

html——ul、li导航栏居中的两种办法: 总结了下导航栏的制作方法：一种是用float设计，提前设置好高度与宽度，然后将要显示的元素设置为float::left依次显示。 ji

td中div居中对齐: td里面的div里面的样式任我怎么调都调不到居中样式，td中align，div里align样式，txt-align样式全改center，结果div中的内容还是没有居中。后来翻了翻button以前笔记，边找着button的css，结果发现了button的css中...

CSS代码(四)：float元素的垂直居中: 在前端程序的开发中，经常会遇到将float元素垂直居中的应用场景，并且结合的场景非常之多，如float元素与inline元素、float元素与float元素、float元素与block元素以及它们的综合应用场景，在大部分的情况下，采用的...

div内元素水平、垂直居中: 参考文章：... 原始代码： <div style="float:left;width:200px;height:200px;background:red;"> <span>aaa</span> </div> <div style="fl...

如何让div水平居中以及垂直居中，在宽高不定的情况下: 宽度高度不固定div的水平居中演示如下：水平居中代码： html部分 123 css部分 .container{width:500px;height:80px;background:#C2300B;margin-left:50px;padding-top:10px;text-align:center;} ....

css未知宽度水平居中的几种解决方案: What is CSS? 1.子元素 div{text-align:center} ... p{display:inline-block} ... div{position:relative;... float:left;} p{position:relative; left:-50%;} 3.利用diplay:table来解决：

CSS中不定宽块状元素的水平居中显示: 任务是实现div元素的水平居中，初始代码如下设置我所在的div容器水平居中使用table标签实现的代码如下设置我所在的div容器水平居中第二种方法是将其设置为内联元素，通过父类来修改

div中加入span右对齐后出现换行显示两种解决思路(同行显示，一个居中，一个靠右): 就类似说空间里面模块中模块名靠左，编辑字样出现在靠右，一般思路的话一定是认为通过分开两列，一个align=left,另一个align=right。后来我无意中发现有个东西叫,比如实现模块的效果就可以：文章编辑;当然我们还需要...

HTML CSS + DIV实现整体布局: 盒子模型的相关属性 margin（外边距/边界） border（边框） padding（内边距/填充）我们看图理解一下各属性作用：以上属性又分为上、右、下、左四个方向问题：页面元素的宽度width、高度height...

CSS的布局与居中: 给两个div添加 float: left;属性 <body> <div style="border:5px solid red;float:left"> 第一个div</div> <div style="border:5px solid ...

如何使整个页面内容居中: 如何使整个页面内容居中，如何使高度适应内容自动伸缩。这是学习CSS布局最常见的问题。下面就给出一个实际的例子，并详细解释。首先先按这里看实际运行效果，这个页面在mozilla、opera和IE浏览器中均可以实现居中...

CSS 如何让li横向居中显示: 标题一标题二标题三标题四 ...以前为了让li中的元素横向并列展示，总是对li设置float:...但是我想让标题居中显示是除了设置margin-left外没有别的办法。这还不能绝对剧中。后面发现只需要简单的两部。

相关热词 c#调用java程序疯狂c# c#多线程处理文本 c# 处理二进制数据类型 c# 如何写文件 c#如何判断程序已打开 c# 标题大小 c# socket 网卡 c#操作sql c#遍历tree