html css 按钮水平对齐

Question

我对 HTML/CSS 中的按钮对齐有疑问。

我在这里创建了一个fiddle：https://jsfiddle.net/wkt4tdL3/1/

这是我的 HTML:

<div id="welcome-screen">
   <H2 id="welcome-title">Click on the flashcards you would like to use:    </H2>
   <br>
   <br>
   <button id="CSS-button">CSS</button>
   <br>
   <br>
   <button id="HTML-button">HTML</button>
</div>

这是我的 CSS:

html, body {
    padding: 0px;
    margin: 0px;
}

#welcome-screen {
    width: 320px;
    margin: 0 auto;
    text-align: center;
}

#welcome-screen button {
    color: blue;
    background-color: yellow;
    font-weight: bold;
    border-radius: 5px;
    width: 50px;
}

我希望按钮直接位于彼此下方。但是，正如您应该能够在 fiddle 中看到的那样，第二个按钮稍微偏向第一个按钮的右侧。

如有任何帮助，我们将不胜感激。

Answer 1

这解决了问题：

#HTML-button
{
    margin-right:2px;
}

Check the fiddle

或者您也可以这样做：

#welcome-screen {
    width: 320px;
    margin: 0 auto;
    text-align: center;
    display:inline;
}

#welcome-screen button {
    margin-left:200px;
    color: blue;
    background-color: yellow;
    font-weight: bold;
    border-radius: 5px;
    width: 50px;
}

Check the fiddle

Answer 2

我建议放弃任何带有很多 "br" 标签的内容...有时您会得到额外的空格...而且仅仅管理边距可能很危险。

看这里:: https://jsfiddle.net/beauxjames/93mvzL3s/

现在您可以轻松添加更多按钮并将它们作为列表进行管理

<ul class="buttonWrapper">
    <li><button id="CSS-button">CSS</button></li>
    <li><button id="HTML-button">HTML</button></li>
</ul>

然后用几个简单的样式

ul.buttonWrapper { list-style-type:none;padding:0;margin:0; width: 100%; }
ul.buttonWrapper li { text-align: center;margin-bottom: 5px; }

您获得更多控制权

Answer 3

虽然 ReadyToHelp 的回答确实在视觉上解决了这个问题，但我认为从长远来看，为这种简单的事情增加保证金并不是一个好主意。

第二个按钮稍微偏移的原因是因为使用了空格，如果我们将 html 更改为

<button id="CSS-button">CSS</button><br><br><button id="HTML-button">HTML</button>

然后按钮按预期排列，这也意味着继续前进时您不必记住要适应您添加的边距。

您也可以使用

<button id="CSS-button">CSS</button><!--
--><br><br><!--
--><button id="HTML-button">HTML</button>

但是我强烈建议不要使用 br 标签来定位元素，而是使用

<div><button id="CSS-button">CSS</button></div>
<div><button id="HTML-button">HTML</button></div>

html css 按钮水平对齐

html css button horizontal alignment

html

css

button

alignment