Question

我试图将盒子水平居中。目前它们与左侧对齐，当您调整窗口大小时，它们会相应地移动。我仍然希望保留该功能。即使我调整窗口大小，我也想把盒子放在中心位置。我试过漂浮：中心，但没有这样的事情......谢谢。

.mybtn {
font:bold 20px"Arial Black", Gadget, sans-serif;
font-style:normal;
color:#ffd324;

background-color: rgba(255,0,0,.90);
border:2px solid #000;
text-shadow:0px -1px 1px #222222;
box-shadow:0px 0px 12px #2e2300;
-moz-box-shadow:0px 0px 12px #2e2300;
-webkit-box-shadow:0px 0px 12px #2e2300;
border-radius:15px 15px 15px 15px;
-moz-border-radius:15px 15px 15px 15px;
-webkit-border-radius:15px 15px 15px 15px;
width:100px;
height:100px;
margin:5px;
float:left;
position:relative;
}

和HTML

<div class="mybtn">

</div>

<div class="mybtn">

</div>

<div class="mybtn">

</div>

<div class="mybtn">

</div>

<div class="mybtn">

</div>

Answer 1

您可以将它们包装在div中，将text-align:center应用于它，然后移除.mybtn div上的浮动并将显示更改为内联块。

#wrapper {
    text-align:center;
}

<强> jsFiddle example

Answer 2

正如j08691所说：

您可以将它们包装在div中，对其应用text-align:center，然后移除.mybtn div上的浮动并将显示更改为内联块，而不是使用<div>当引用页面的“部分”时，使用<section>标记作为<div>标记应该在HTML5中避免使用。

所以新代码看起来像是：

<强> HTML ：

<section>
    <div class="transparent-btn"></div>
    <div class="transparent-btn"></div>
    <div class="transparent-btn"></div>
    <div class="transparent-btn"></div>
    <div class="transparent-btn"></div>
</section>

<强> CSS ：

section {
    text-align: auto;
}

.transparent-btn {
    font:bold 20px"Arial Black", Gadget, sans-serif;
    font-style:normal;
    color:#ffd324;
    display: inline;
    background-color: rgba(255,0,0,.90);
    border:2px solid #000;
    text-shadow:0px -1px 1px #222222;
    box-shadow:0px 0px 12px #2e2300;
    -moz-box-shadow:0px 0px 12px #2e2300;
    -webkit-box-shadow:0px 0px 12px #2e2300;
    border-radius:15px 15px 15px 15px;
    -moz-border-radius:15px 15px 15px 15px;
    -webkit-border-radius:15px 15px 15px 15px;
    width:100px;
    height:100px;


    margin:5px;
    position:relative;


}

如何使用CSS将以下框居中

2 个答案: