如何使用两个内联按钮将 div 居中（css）？ [复制]答案

【问题标题】：How to center div with two inline buttons in it (css)? [duplicate]如何使用两个内联按钮将 div 居中（css）？ [复制]
【发布时间】：2017-01-18 04:26:49
【问题描述】：

我目前正在使用 Bootstrap 设计一个网页，我有两个 <a> 按钮在 <div class="jumbotron"></div> 内彼此内联

这是 HTML 代码：

   <div class="jumbotron hub-jumbo">
        <div class="hub-header">
            <div class="container">
                <h2 class="txt-white">Jason's Summer Vacation</h2>
                <p class="txt-white">There doesn't seem to be a description here!</p>
            </div>
        </div>
        <div class="hub-btns">
            <a class="copy-link btn btn-lg btn-wide bg-white" href="" role="button">Copy Link</a>
            <a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-blue ripple" href="" role="button">Create Drop</a>
        </div>
    </div>

这是包装按钮和按钮本身的 div 的 CSS：

.hub-btns {
    display: inline-block;
    margin: auto;
}

.hub-btns .copy-link {
    border-bottom-color: #EBEBEB;
}

.hub-btns .create-drop:hover {
    background-color: #03a9f4;
}

.hub-btns .create-drop:focus {
    background-color: #03a9f4;
    border-bottom-color: #0398db;
}

.hub-btns a {
    margin: 0 10px;
}

我对 CSS 仍然不是很好，所以我可能在这里遗漏了一些明显的东西。但是，我只是想采用包装两个按钮的 div 并将该 div 居中在 jumbotron div 中。

非常感谢任何帮助！

【问题讨论】：

如果一个答案对你有帮助，如果你接受这个答案会很好。

标签： html css twitter-bootstrap twitter-bootstrap-3 responsive-design

【解决方案1】：

在不了解您要做什么的情况下提供帮助有点棘手。在.hub-btns 中添加text-align: center; 应该足以使这些按钮居中对齐。

另外，我可能会将margin: 0 10px; 移动到.hub-btns，而不是直接将其应用于锚点/按钮。

最后，如果您不需要支持旧浏览器，请尝试花一些时间学习 flexbox 的基础知识。在“调整事物”方面，它让我们的生活变得更加轻松。

【讨论】：

可爱，我的队友在我检查这个时添加了这一点。谢谢！

【解决方案2】：

我对类名进行了一些更改（删除了空格）并添加了一些边框，以便您更好地理解 div 的放置。这是代码：

<html>
<head>
<style>
.jumbotron-hub-jumbo {
margin: 0 auto;
border:2px solid black;
width:300px;
}

.hub-btns {
    margin: 0 auto;
	width:200px;
	border:2px solid green;
}

.hub-btns .copy-link {
    border-bottom-color: #EBEBEB;
}

.hub-btns .create-drop:hover {
    background-color: #03a9f4;
}

.hub-btns .create-drop:focus {
    background-color: #03a9f4;
    border-bottom-color: #0398db;
}

.hub-btns a {
	width:200px;
	border: 2px solid red;
    margin: 0 10px;
}
</style>
</head>
<body>
   <div class="jumbotron-hub-jumbo">
        <div class="hub-header">
            <div class="container">
                <h2 class="txt-white">Jason's Summer Vacation</h2>
                <p class="txt-white">There doesn't seem to be a description here!</p>
            </div>
        </div>
        <div class="hub-btns">
            <a class="copy-link btn btn-lg btn-wide bg-white" href="" role="button">Copy Link</a>
            <a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-blue ripple" href="" role="button">Create Drop</a>
        </div>
    </div>
	</body>
</html>

在 HTML 中，我刚刚更改了类 jumbotron hub-jumbo

我看到你说你是 CSS 新手，不要害怕看到 HTML 和 CSS 合并在一起。只需剪切样式部分并将其粘贴到您的 style.css 中。

【讨论】：