div_html/css_WEB-ITnose を中央に配置する方法-htmlチュートリアル-php.cn

div_html/css_WEB-ITnose を中央に配置する方法

WBOY

リリース： 2016-06-24 12:23:44

オリジナル

1019 人が閲覧しました

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

ログイン後にコピー

2つの div b と c を中央に配置したいのですが、その方法

ディスカッションへの返信 (解決策)

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

ログイン後にコピー

Centering:margin:0 auto,

無理ですfloat:left でそれを中央に移動します、

1 階で、私が欲しいのは 2 つのレイヤー b と c が左右に配置されていることです

1 階で、私が欲しいのは 2 つのレイヤー b と c左右に配置
aを中央に配置したくない場合は、bとcを配置することはできません要素を外側に配置することはできません

2階のものを見てください

問題はありません。要素がボディ内の中央に配置されるように設定するだけです。

<!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 を使用しますが、機能しません