Question

我无法在DIV中居中按钮。

我目前得到的结果是：

HTML是：

<div id="buttonDiv">
<div class="button">
<button type="submit" onClick="setSid()">Click here to Start Test</button>
</div>
</div>

CSS包括：

#buttonDiv {
        position: fixed;
        width:200px;
        height:200px;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
        border-bottom-width:1px;
        border-top-width:1px;
        border-right-width:1px;
        border-left-width:1px;
        border-style:solid;
        border-color:#000000;
}

.button {
     display:table-cell;
     align-content:center;
     vertical-align:middle; 
}

我相信这条路线应该适用于文字，但似乎不适用于按钮。我已经尝试将这个类直接添加到按钮中，但没有任何乐趣。

由于

Answer 1

如果将text-align center添加到父容器，则该按钮将水平居中。然后你可以使用 top：50％; transform：translateY（-50％）; 技巧垂直居中。

<强> HTML

<div id="buttonDiv">
<button type="submit" onClick="setSid()">Click here to Start Test</button>
</div>

<强> CSS

#buttonDiv {
        position: fixed;
        width:200px;
        height:200px;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
        border-bottom-width:1px;
        border-top-width:1px;
        border-right-width:1px;
        border-left-width:1px;
        border-style:solid;
        border-color:#000000;
        text-align:center;
}

button {
   position:relative;
   top: 50%;
   transform: translateY(-50%);
}

jsfiddle option 1

以下编辑

如果你需要保留'.button'div，你可以移动顶部：50％; transform：translateY（-50％）; 到该类。

HTML

<div id="buttonDiv">
    <div class="button">
         <button type="submit" onClick="setSid()">Click here to Start Test</button>
    </div>
</div>

CSS

#buttonDiv {
   position: fixed;
   width:200px;
   height:200px;
   top: 50%;
   left: 50%;
   margin: -100px 0px 0px -100px;
   border: 1px solid #000;
   text-align:center;
}
.button {
   position:relative;
   top: 50%;
   transform: translateY(-50%);
}

jsfiddle option 2

Answer 2

尝试将框的行高设置为其高度;然后将按钮显示为内联元素并添加 text-align：center

#buttonDiv {
        position: fixed;
        width:200px;
        height:200px;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
        border-bottom-width:1px;
        border-top-width:1px;
        border-right-width:1px;
        border-left-width:1px;
        border-style:solid;
        border-color:#000000;
  line-height:200px;
  text-align:center;
}

.button {
     display:inline;
}

<div id="buttonDiv">
<div class="button">
<button type="submit" onClick="setSid()">Click here to Start Test</button>
</div>
</div>

Answer 3

怎么样：

CSS：

#buttonDiv {
        position: fixed;
        width:200px;
        padding: 78px 0;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
        border: 1px solid #000;
}

.button {
  width: 90%;
  margin: 0 auto;
}

将一个按钮放在DIV内

3 个答案: