How to center div with two inline buttons in it (css)?

Question

I'm currently designing a webpage using Bootstrap and I have two <a> buttons laid inline with each other inside of the <div class="jumbotron"></div>

Here's the HTML code:

   <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>

And here's the CSS of the div wrapping the buttons and the buttons themselves:

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

I'm still not great with CSS so I'm probably missing something obvious here. But, I simply want to take the div that is wrapping the two buttons and center that div within the jumbotron div.

Any help is greatly appreciated!

If an answer is helpful to you, it would be nice if you accepted that answer. — Randy, Dec 19 '16 at 21:30

Coke · Answer 1 · 2016-09-10T01:23:37.173

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>

In the HTML I just changed class jumbotron hub-jumbo

I saw you said you are new to CSS, don't be afraid seeing HTML and CSS merged together. Just cut style part and paste it into your style.css.

rafaelbiten · Answer 2 · 2016-09-10T00:52:26.790

1

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-btnsinstead 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'.

edited Sep 10 '16 at 00:52

answered Sep 10 '16 at 00:50

rafaelbiten

6,074
2
31
36

1

Lovely, my team mate added that right as I was checking this. Thanks! – Jason Procka Sep 10 '16 at 00:51

How to center div with two inline buttons in it (css)?

2 Answers2