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

Ixs3n7c 2014-07-09 11:52:52
<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以外的方法吗?
...全文
6907 9 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
Yvonnebai 2014-07-17
  • 打赏
  • 举报
回复
margin:0 auto
叶落无痕0826 2014-07-15
  • 打赏
  • 举报
回复
div_1的margin:0 auto,这样试试!
弘毅致远 2014-07-14
  • 打赏
  • 举报
回复
<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>
  • 打赏
  • 举报
回复
<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-10
  • 打赏
  • 举报
回复
关于图片位置调整还是用绝对定位来处理比较好,漂浮在精确位置处理很差的
张运领 2014-07-09
  • 打赏
  • 举报
回复
不要这样搞吧,float的本意就是为了让他们向边上靠齐的显示,你这里既然想要居中,干嘛还要使用float? 而且,过度的使用float并不好的。
KK3K2005 2014-07-09
  • 打赏
  • 举报
回复
<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
  • 打赏
  • 举报
回复
<!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
  • 打赏
  • 举报
回复

<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>

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧