Heim > Web-Frontend > HTML-Tutorial > div居中怎么弄_html/css_WEB-ITnose

div居中怎么弄_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:23:44
Original
1019 Leute haben es durchsucht

<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>
Nach dem Login kopieren



我想让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>
Nach dem Login kopieren


居中: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>
Nach dem Login kopieren

<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>
Nach dem Login kopieren

楼上的方法不错,\

margin:auto;

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage