Html不居中

Question

首先，我想说我对编码知之甚少。

在这个网站中，我制作了http://academiadae.com，我在每边添加了两个小的class=，这样我就可以将一个div div“6U”居中。

<div class="row">
    <div class="3u"></div>
    <div class="6u"><img src="images/logo.png" /></div>
    <div class="3u"></div>
</div>

你能帮助我在不需要其他div的情况下使它居中吗？我尝试在CSS中设置不同的element =center，但不起作用。

谢谢。

Answer 1

首先，您使用的类6u将不会被选中。CSS名称必须以下划线(_)、连字符(-)或字母(a-z)开头，才能将其用作CSS选择器。您可以查看此page以获得任何参考。

其次，如果你想让单个div居中，你可以应用这个：

<div class="row">
  <div class="item6u">
  test
  </div>
</div>

其中只有一个div的类名以字母开头。对于CSS，你需要设置div的宽度，就像@Sprazer告诉你的那样，你需要设置页边距：

.row{
   background-color:yellow;
}
.item6u{
   background-color:red; 
   width:50%; //changed to 50% percentage as wawa suggested
   margin:0 auto; 
   text-align:center;
}

请参阅此处的代码：JSFIDDLE。

Answer 2

因此，您当前拥有的内容如下: HTML

             <div class="row">
                <div class="3u">
                </div>
                <div class="6u">
                    <img src="images/logo.png">
                </div>
                <div class="3u">
                </div>
            </div>

和CSS：

div.6u{
width: 50%;
clear: none;
float:left;
margin-left: 0;
}

您需要将其更改为HTML：

<div class="row>
   <div class="6u">
    ...contents of the div here...
   </div>
</div>

和CSS (注意: do remove float:left，否则将不起作用)：

div.6u{
width:50%;
clear:none;
margin-left:auto;
margin-right:auto;

}