html css按钮水平对齐

Question

我在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;
}

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

任何帮助，将不胜感激。

Answer 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; }

你得到更多的控制权

Answer 2

这样可以解决问题：

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

检查小提琴

另外，您也可以这样做：

#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;
}

检查小提琴

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>