-2

私は HTML/CSS を学んでいますが、これまでのところ、特にポジショニングに関しては、まだ CSS に問題があります。

たとえば、次のことがうまくいかない理由を誰かに説明してもらえますか?

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

    <style type="text/css">
    ​#main{
        background-color : blue;   
        height : 50px;
        width : 30px;
    }
    .centerer{
        margin : 0 auto;}

    ​
    </style>
</head>

<body>
    <div class="centerer">
        <div id="main">
        </div>
    </div>​​​​​
</body>
</html>
4

7 に答える 7

2

デモ

#main 今あなたのID を定義し、あなたのクラスdisplay:inline-blockで与えるtext-align:center.centerer

このようにこれを行うために書く

Css

#main {
    background-color: blue;
    height: 50px;
    width: 30px;
  display:inline-block;
  vertical-align:top;
}
    .centerer{
        margin : 0 auto;
width:200px;
  background:red;
  text-align:center;
}

あなたのhtml 

<div class="centerer">
        <div id="main">fgasdfds fsd ds fsd
        </div>
    </div>

デモ

于 2012-11-05T11:18:42.990 に答える
0

それが機能するためには、明確な幅を与える必要があります.center。そうしないと、ブラウザは左右のマージンを計算できません。以下が機能するはずです。

.centerer{
        margin : 0 auto;
   width:100px;
}
于 2012-11-05T11:19:28.000 に答える
0

あなたはを通してあなたの望む結果を得ることができますmargin:auto;

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

        <div id="main">afdafdaf
        </div>

</body>
</html>

CSS

#main {
margin:auto;
  width:500px;
  height:100px;
  background:red;
  text-align:center;
}

デモ

于 2012-11-05T11:19:43.707 に答える
0

.centerer は中央に配置width: autoされ、コンテナと同じ幅 (デフォルト) であり、左揃えまたは右揃えの場合と同じように見えます。

中央に配置したい場合は、それ自体#mainに自動マージンを設定する必要があります#main。

于 2012-11-05T11:24:29.613 に答える
0

centererdiv に幅を与えてみてください。

于 2012-11-05T11:20:56.343 に答える
0

を使用margin:0 autoすると DIV が中央に配置されますが、適切に機能させるには幅を指定する必要があります。

たとえば、CSS では次のようになります。

div {
    width: 900px;
    margin:0 auto;
}


これは、DIV が中央に配置されるように更新された HTML/CSS コードです。

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

<style type="text/css">
#main {
    background-color: blue;
    height : 50px;
    width : 30px;
}

.centerer {
    margin : 0 auto;
    width: 30px;
}
</style>
</head>

<body>
    <div class="centerer">
        <div id="main">
    </div>
</div>​​​​​

</body>
</html>

または、同じ CSS を適用して、div を中央に配置.centererする代わりに、 div を削除することもできます。すでに幅が定義されているので、追加するだけです。ただし、他のアイテムをコンテナー内の中央に配置する場合は、そのままにしておきます。#mainmargin:0 auto;.centerer

于 2012-11-05T19:34:49.197 に答える
0

#main を中央に配置したいので、margin:0 auto;#main に与える必要があります。

ここにデモがあります

HTML :

<div class="centerer">
        <div id="main"></div>
</div>​

そしてCSS：

.centerer {background-color : red;}

#main {
        background-color : blue;   
        height : 50px;
        width : 30px;
        margin : 0 auto;
    }
​
于 2012-11-05T12:09:14.490 に答える