首页 >web前端 >html教程 >div居中怎么弄_html/css_WEB-ITnose

div居中怎么弄_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 12:23:441021浏览

<style>	.a{border:1px solid red;height:50px;}	.b{border:1px solid blue;float:left;}	.c{border:1px solid green;float:left;}</style><div class="a">	<div class="b">bbbbbbbbbbbbbbbbb</div>	<div class="c">ccccccccccccccccc</div></div>



我想让b和c 两个div 居中,该怎么弄


回复讨论(解决方案)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>	.a{border:1px solid red;height:50px;}	.b{border:1px solid blue;}	.c{border:1px solid green;}	.w200{width:200px;}	.ctn{margin:0 auto;}</style></head><body><div class="a">	<div class="b ctn w200">bbbbbbbbbbbbbbbbb</div>	<div class="c ctn w200">ccccccccccccccccc</div></div></body></html>


居中:margin:0 auto,

有float:left是不可能作到居中的,

1楼,我要的是b c 两个层左右排列

1楼,我要的是b c 两个层左右排列
如果不想让a居中,又不能在b,c的外面套一个元素,是实现不了的

看看二楼的东西

可以的吧,在body里面设置元素居中吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title>       </script></head><body><style>    .a{border:1px solid red;height:50px;}	.d{ width:404px;margin:auto;}    .b{border:1px solid blue; width:200px; float:left; }    .c{border:1px solid green; width:200px; float:left;}</style><div class="a">  <div class="d">    <div class="b">bbbbbbbbbbbbbbbbb</div>    <div class="c">ccccccccccccccccc</div>   </div></div><div id="content"></div></body></html>

<style>    .a{border:1px solid red;height:50px;}    .b{padding-left:12px;padding-right:12px;border:1px solid blue;}    .c{border:1px solid green;float:left;}    .d{width:300px;margin:0 auto;}    .b,.c{text-align:center;}</style><div class="a"><div class="d">    <div class="b">bbbbbbbbbbbbbbbbb</div>    <div class="c">ccccccccccccccccc</div></div></div>

楼上的方法不错,\

margin:auto;

我还真很少这样用,我用text_align:center这样不行

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn