Текстовые выравнивающие центральные кнопки

Question

Мне нужно центральные кнопки в середине страницы, один под другим.

Я использовал код ниже, но в результате кнопки все еще отображались рядом друг с другом.

header { 
 
    text-align: center; 
 
    .btn { 
 
    @include Myriad-Pro-Light; 
 
    border-radius: 7px; 
 
    padding: 5px 10px; 
 
    border: none; 
 
    } 
 
    .btn-green { 
 
    color: #fff; 
 
    background: #7CAE9E; 
 
    margin: 20px; 
 
    } 
 
    .btn-grey { 
 
    color: #333; 
 
    background: $grey; 
 
    margin: 20px; 
 
    } 
 
}

<header> 
 
    <a href="#" class="btn btn-default btn-green" role="button">Button A</a> 
 
    <a href="#" class="btn btn-default btn-grey" role="button">Button B</a> 
 
</header>

Спасибо

Answer 1

вы можете использовать "Flexbox" для этого

header { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    .btn { 
 
     @include Myriad-Pro-Light; 
 
     border-radius: 7px; 
 
     padding: 5px 10px; 
 
     border: none; 
 
    } 
 

 
    .btn-green { 
 
     color: #fff; 
 
     background: #7CAE9E; 
 
     margin: 20px; 
 
    } 
 

 
    .btn-grey { 
 
     color: #333; 
 
     background: $grey; 
 
     margin: 20px; 
 
    } 
 
}

<header> 
 
     <a href="#" class="btn btn-default btn-green" role="button">a</a> 
 
     <a href="#" class="btn btn-default btn-grey" role="button">b</a> 
 
    </header>

Без Flexbox

.btn { 
 
    @include Myriad-Pro-Light; 
 
    border-radius: 7px; 
 
    padding: 5px 10px; 
 
    border: none; 
 
    float: left; 
 
    clear: both; 
 
    width: calc(100% - 40px); 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
} 
 
.btn-green { 
 
    color: #fff; 
 
    background: #7CAE9E; 
 
    margin: 20px; 
 
} 
 
.btn-grey { 
 
    color: #333; 
 
    background: $grey; 
 
    margin: 20px; 
 
}

<header> 
 
    <a href="#" class="btn btn-default btn-green" role="button">a</a> 
 
    <a href="#" class="btn btn-default btn-grey" role="button">b</a> 
 
</header>

Answer 2

Update проверка новая скрипка

https://jsfiddle.net/bimbonkens/fa7s3ypj/

вам нужно только

display:block 

на кнопках.

также ваш синтаксис CSS является неправильным для ванильного CSS (нет Препроцессоры)

header { 
    .btn {} 
} 

должен быть этот

header { } 
.btn { } 

и если вам нужен контекст:

header {} 
header .btn {} 

Вам нужно использование

margin: 0 auto; 

для блочных элементов, потому что

text-align:center; 

работает только на встроенных и встроенный блок

Answer 3

Вы хотите что-то вроде этого: -

header { 
 
    text-align: center; 
 
    .btn { 
 
    @include Myriad-Pro-Light; 
 
    border-radius: 7px; 
 
    padding: 5px 10px; 
 
    border: none; 
 
    } 
 
    .btn-green { 
 
    color: #fff; 
 
    background: #7CAE9E; 
 
    margin: 20px; 
 
    } 
 
    .btn-grey { 
 
    color: #333; 
 
    background: $grey; 
 
    margin: 20px; 
 
    } 
 
}

<header> 
 
    <a href="#" class="btn btn-default btn-green" role="button">Button A</a><br> 
 
    <a href="#" class="btn btn-default btn-grey" role="button">Button B</a> 
 
</header>

Answer 4

1 w ау идти может быть следующее:

header { 
 
    text-align: center; 
 
} 
 
    header .btn { 
 
    border-radius: 7px; 
 
    padding: 5px 10px; 
 
    border: none; 
 
    display: block; 
 
    width: 100px; 
 
    margin: auto; 
 
    } 
 

 
    .btn-green { 
 
    color: #fff; 
 
    background-color: #7CAE9E; 
 
    margin: 20px; 
 
    } 
 
    .btn-grey { 
 
    color: #333; 
 
    background-color: grey; 
 
    margin: 20px; 
 
    }

<header> 
 
    <a href="#" class="btn btn-default btn-green" role="button">Button A</a> 
 
    <a href="#" class="btn btn-default btn-grey" role="button">Button B</a> 
 
</header>