html css按钮水平对齐答案

【问题标题】：html css button horizontal alignmenthtml css按钮水平对齐
【发布时间】：2016-02-20 13:59:32
【问题描述】：

我遇到了 HTML/CSS 中的按钮对齐问题。

我在这里创建了一个小提琴：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;
}

我希望按钮在彼此的正下方。但是，正如您在小提琴中应该看到的那样，第二个按钮位于第一个按钮的右侧。

任何帮助将不胜感激。

【问题讨论】：

标签： html css button alignment

【解决方案1】：

我建议放弃任何带有大量“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; }

您获得更多控制权

【讨论】：

+1，你在我打字的时候就回答了，无缘无故乱扔边距会在以后造成很多麻烦。
谢谢。效果很好。我更喜欢你的回答，但我也意识到通过添加 position: absolute;左边距：-25px； #welcome-screen 按钮样式，它也解决了它。
它可能已经“解决”了它，但是 position:absolute 如果你不明白它在做什么也会带来意想不到的副作用......请原谅我的假设，但我认为你不知道知道你在做什么......

【解决方案2】：

这解决了问题：

#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

【讨论】：

【解决方案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>

【讨论】：