Home  >  Article  >  Web Front-end  >  浮动div居中显示问题_html/css_WEB-ITnose

浮动div居中显示问题_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 09:44:302150browse

HTML

怎么让里面2个div居中?
<div style=" width:100%; height:200px; border:1px solid red; text-align:center; margin:0px auto;"><div style=" width:150px;; height:120px; border:1px solid yellow; margin:10px 10px 0px 0px; float:left; "></div><div style=" width:150px; height:120px; border:1px solid red; float:left; margin:10px 10px 0px 0px; "></div></div>

回复讨论(解决方案)

在用一个div把2个div装起 就行了 固定宽度 居中





3楼的代码可以实现。
但是第一句中的  text-align:center;好像没有必须加进去。
我记得text-align:center是对文本来进行控制的,和DIV的定位没有关系。

<div style=" width:100%; height:200px; border:1px solid red;margin:0px auto;"> <div style="width:345px; margin:0px auto;"> <div style=" width:150px; height:120px; border:1px solid yellow; margin:10px 10px 0px 0px; float:left; "></div> <div style=" width:150px; height:120px; border:1px solid red; float:left; margin:10px 10px 0px 0px; "></div> </div></div> 

在用一个div把2个div装起 就行了 固定宽度 居中

在用一个div把2个div装起 就行了 固定宽度 居中

除了固定宽度外还有别的办法吗?

<div style=" width:100%; height:200px; border:1px solid red;  margin:0px auto;"><div style=" width:20%;; height:120px; border:1px solid ; display:inline-block;  margin:10px auto 0px 30%;"></div><div style=" width:20%; height:120px; border:1px solid red; display:inline-block; margin:10px auto 0px auto;"></div></div>

外层div是百分数,内层如果px设置长度,那么想要居中则要需要计算margin的宽度。把内层的div宽度也设置成百分比可以解决。


在用一个div把2个div装起 就行了 固定宽度 居中

在用一个div把2个div装起 就行了 固定宽度 居中

除了固定宽度外还有别的办法吗?

你是什么意思?你里面2个层浮动了的!其它方法我暂时不晓得。

1.使用


2.使用css;#div1,#div2 {margin:0 atuo;},记得声明nbsp;html>
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn