Question

我目前正在使用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中。

非常感谢任何帮助！

Answer 1

我在课程名称（删除的空格）中进行了一些更改并添加了一些边框，以便您更好地理解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中即可。

Answer 2

在没有看到你想要做的事情的情况下提供帮助有点棘手。在text-align: center;中添加.hub-btns应该足以使这些按钮居中对齐。

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

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

如何用div中的两个内联按钮（css）居中？

2 个答案: