How to center div with two inline buttons in it (css)?
This question already has an answer here:
I made some changes in a class name (removed spaces) and put some borders for your better understanding of the div placing. Here is the code:
<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> It's a bit tricky to help without seeing what you're trying to do. Adding text-align: center; inside the .hub-btns should be enough to center align those buttons.
Also, I would probably move the margin: 0 10px; to .hub-btns instead of applying it the anchors/buttons directly.
Lastly, if you don't need to support old browsers, try to invest some time learning the basics of flexbox. It makes our life a lot easier when it comes to 'aligning things'.
链接地址: http://www.djcxy.com/p/13222.html上一篇: CSS：垂直和水平对齐文本？