HTML中可以设置文字或内容居中对齐。下面，我们来看看怎样让DIV中的内容居中吧。
01 随便写上文字
先打开visual studio软件，然后在div中随意写上文字，如下图所示：
水平居中代码
然后在style中写上水平居中代码body{text-align: center;}，如下图所示：
div内容居中对齐的代码，text-align:center;如下图所示：
04 预览效果
然后在浏览器中预览效果，如下图所示：
给第一个DIV设左浮动！
第二个DIV也设左浮动！
第三个DIV就设右浮动了！
结构：
<div id="quanbu">
<div id="one"></div>
<div id="two"></div>
<div id="san"></div>
</div>
CSS代码：
#one{
float:left;
width:200px;
height:200px;
background:#00FF00
}
#two{
margin-left:200px;
float:left;
width:200px;
height:200px;
background:#CCFF33;
}
#san{
float:right;
width:200px;
height:200px;
background:#FF0000
}
你的意思是 一定要浮动 且全是左浮动 又要能居中 尽量不动原来的代码我的办法是：
。。。
<body>
<div id="hezi">
<div id="new" style="text-align:center;width:10%;">
<div class="s_cell">
<span class="font_style">浮动元素内容1</span>
</div>
。。。
<div class="s_cell">
<span class="font_style">浮动元素内容23</span>
</div>
</div>
<div id="qiuzhu">求助：怎样让这些浮动的DIV时刻居中，不论我怎么改变浏览器的大小</div>
</div>
。。。
但这只是视觉上的，如果还要有别的东西（成熟网页不可能只有这些），可能width属性要微调来进行匹配，调整width大小，就能调整想要几个元素并排。左边div 宽度 20% ,text-align: right
中间div 宽度 60%，里面select宽度100%
右边div 宽度20%，text-align:left<div style=" margin:auto; width:346px; height:102px; border:solid 1px #000000;">
<div style=" width:100px; height:100px; border:solid 1px blue; float:left; margin-left:10px;"></div>
<div style=" width:100px; height:100px; border:solid 1px red; float:left; margin-left:10px;"></div>
<div style=" width:100px; height:100px; border:solid 1px yellow; float:left; margin-left:10px;"></div>
</div>
div要横向排列就要用float，居中要用margin-left:auto;margin-right:auto,但是有float，这个margin-left:auto;margin-right:auto;就会出问题，所以就要在外围定义一个容器，在外围设置margin-left:auto;margin-right:auto居中
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）