CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbuttontext-alignment
Noah Wallaart
Noah Wallaart

Reputation: 35

Cant center allign my buttons

Im making a portfolio website, since I need to deliver it for school. Now I'm trying to text-align center my buttons on the webpage. I have tried a lot, giving the li, ol and several class the : text-align: center, margin-right/margin-left:auto. Nothing seems to work. I've been stuck now for more than 1,5 hour, so it would be amazing if one of you guys could help me out with this problem.

Thanks a lot in advance!

Noah

Picture here : https://i.sstatic.net/IQHKs.jpg

HTML:

<div class="jumbotron">

        <div class="container container-fluid">
            <div class="row">
                <div class="col-md-12 midden ">
                    <ol>
                        <li><a href="#" role="button">Contact</a></li>
                        <li><a href="#" role="button">Work</a></li>
                    </ol>
                </div>
            </div>


            <div class="row">
                <div class="col-md-3-offset-3">


                    <h1>Noah Wallaart</h1>
                </div>

                <div class="col-md-6">
                </div>
            </div>
        </div>
    </div>




Css:


.jumbotron {
    background: url("/image/background4.JPG") no-repeat scroll center center / cover;
    height: 720px;
    margin-top: -20px;
}

div h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 50px;
    color: white !important;
    text-align: center;
    margin-top: 0.2em;
}

p {
    font-family: 'Open Sans', sans-serif;
    font-size: 30px;
    color: white;
}

a {
    text-decoration: none;
    color: black;
    font-family: 'Open Sans', sans-serif;
    border: 3px solid black;
    padding: 10px 20px 10px 20px;
    display: inline;
    float: left;
    margin: 20px;
}

li {
    display: inline;
    float: right;
}

a:hover {
    text-decoration: none;
    background-color: #BDBFBD;
    color: white;
    border: 3px solid white;
}


/* Lookbook */

section {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.row-margin {
    margin-bottom: 20px;
    margin-top: 20px;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.less-padding {
    padding: 0px;
}


/* Buttons */

li a {
    text-decoration: none;
    color: white;
    font-weight: 200 font-family: 'Roboto', sans-serif;
    border: 0.15em solid white;
    padding: 10px 20px 10px 20px;
    display: inline;
    float: left;
    margin: 20px;
}


li {
    display: inline;
    width: 120px;  
}

a:hover {
    text-decoration: none;
    background-color: #BDBFBD;
    color: white;
    border: 3px solid white;
    margin-bottom: 0px;
    margin-left: 20px;
}

Upvotes: 2

Views: 132

Answers (3)

Sara In&#233;s Calder&#243;n
Sara In&#233;s Calder&#243;n

Reputation: 1150

Some of your markup was off, 'midden' is not a word, all you had to do was 'text-center' the row and it works fine. Good luck!

<div class="jumbotron">

    <div class="container container-fluid">
        <div class="row text-center">
            <div class="col-md-12">
                <ul class="list-unstyled list-inline">
                    <li><a href="#" role="button">Contact</a></li>
                    <li><a href="#" role="button">Work</a></li>
                </ul>
            </div>
        </div>


        <div class="row">
            <div class="col-md-3-offset-3">


                <h1>Noah Wallaart</h1>
            </div>

            <div class="col-md-6">
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Jinu Kurian
Jinu Kurian

Reputation: 9416

Here we go, add these styles

.midden ol {
    margin-top: 0;
    margin-bottom: 10px;
    display: table; 
    margin: 0 auto;
}
.midden li{
  float: none;
}


.midden ol {
    margin-top: 0;
    margin-bottom: 10px;
    display: table;
    margin: 0 auto;
}
.midden li{
  float: none;
}

.jumbotron {
    background: url("http://www.govisitcostarica.com/images/photos/full-hot-air-balloons-near-arenal.jpg") no-repeat scroll center center / cover;
    height: 720px;
    margin-top: -20px;
}

div h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 50px;
    color: white !important;
    text-align: center;
    margin-top: 0.2em;
}

p {
    font-family: 'Open Sans', sans-serif;
    font-size: 30px;
    color: white;
}

a {
    text-decoration: none;
    color: black;
    font-family: 'Open Sans', sans-serif;
    border: 3px solid black;
    padding: 10px 20px 10px 20px;
    display: inline;
    float: left;
    margin: 20px;
}

li {
    display: inline;
    float: right;
}

a:hover {
    text-decoration: none;
    background-color: #BDBFBD;
    color: white;
    border: 3px solid white;
}


/* Lookbook */

section {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.row-margin {
    margin-bottom: 20px;
    margin-top: 20px;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.less-padding {
    padding: 0px;
}


/* Buttons */

li a {
    text-decoration: none;
    color: white;
    font-weight: 200 font-family: 'Roboto', sans-serif;
    border: 0.15em solid white;
    padding: 10px 20px 10px 20px;
    display: inline;
    float: left;
    margin: 20px;
}


li {
    display: inline;
    width: 120px;  
}

a:hover {
    text-decoration: none;
    background-color: #BDBFBD;
    color: white;
    border: 3px solid white;
    margin-bottom: 0px;
    margin-left: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">

        <div class="container container-fluid">
            <div class="row">
                <div class="col-md-12 midden ">
                    <ol>
                        <li><a href="#" role="button">Contact</a></li>
                        <li><a href="#" role="button">Work</a></li>
                    </ol>
                </div>
            </div>


            <div class="row">
                <div class="col-md-3-offset-3">


                    <h1>Noah Wallaart</h1>
                </div>

                <div class="col-md-6">
                </div>
            </div>
        </div>
    </div>

Upvotes: 0

Nick Larsen
Nick Larsen

Reputation: 18877

When you're using Bootstrap, you don't want to overwrite the properties provided by the framework. Instead all you need to do is give the container the text-center class and it should work fine.

<div class="jumbotron">

    <div class="container container-fluid">
        <div class="row">
            <div class="col-md-12 text-center"> <!-- THIS LINE CHANGED -->
                <ol>
                    <li><a href="#" role="button">Contact</a></li>
                    <li><a href="#" role="button">Work</a></li>
                </ol>
            </div>
        </div>


        <div class="row">
            <div class="col-md-3-offset-3">


                <h1>Noah Wallaart</h1>
            </div>

            <div class="col-md-6">
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Related Questions