How to center a div_html/css_WEB-ITnose-HTML Tutorial-php.cn

How to center a div_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:23:44

Original

1033 people have browsed it

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

Copy after login

I want the two divs b and c to be centered, how to do it

Reply to the discussion (solution)

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

Copy after login

Center:margin:0 auto,

It is impossible to center with float:left,

1st floor, what I want is b c Layers arranged left and right

On the 1st floor, what I want is two layers b and c arranged left and right
If you don’t want a to be centered and you can’t put an element outside b and c, it won’t be possible

Take a look at the things on the second floor

Yes, just set the element to be centered in the 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>

Copy after login

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

Copy after login

The method above is good,

margin:auto;

I really like it Don’t use it like this. I use text_align:center but that doesn’t work