Не могу центр выровнять мои кнопки

Question

Не могу центр выровнять мои кнопки

Я создаю веб-сайт портфолио, так как мне нужно доставить его в школу. Теперь я пытаюсь выровнять текст по центру моих кнопок на веб-странице. Я много пробовал, предоставив li, ol и нескольким классам: text-align: center, margin-right / margin-left: auto. Ничто не похоже на работу. Я застрял уже более 1,5 часа, так что было бы здорово, если бы кто-нибудь из вас помог мне с этой проблемой.

Заранее большое спасибо!

Ной

Изображение здесь: https://imgur.com/EAQTdVM

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

2

html css twitter-bootstrap button text-alignment

Источник

user5869830 02 фев '16 в 12:56

3 ответа

Решение

Некоторая часть вашей разметки была отключена, 'midden' - это не слово, все, что вам нужно было сделать, это 'text-center' строки, и она отлично работает. Удачи!

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

1

Источник

user4488853 02 фев '16 в 14:46

Когда вы используете Bootstrap, вы не хотите перезаписывать свойства, предоставляемые фреймворком. Вместо этого все, что вам нужно сделать, это дать контейнеру text-center класс и все должно работать нормально.

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

0

Источник

user178082 02 фев '16 в 13:02

Другие вопросы по тегам html css twitter-bootstrap button text-alignment

user4947434 02 фев '16 в 13:26 2016-02-02 13:26 · Accepted Answer · 2016-02-02 13:26

Здесь мы идем, добавьте эти стили

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