Позиционирование кнопок HTML с помощью CSS

Question

Пока у меня есть 3 кнопки в браузере, которые используют один и тот же код CSS. Однако они размещены прямо под изображением в заголовке, а части кнопки обрезаны. Я пытаюсь позиционировать 3 кнопки в центре страницы и с равным интервалом.

код CSS для butttons:

.btn { 
    background: #3498db; 
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9); 
    background-image: -moz-linear-gradient(top, #3498db, #2980b9); 
    background-image: -ms-linear-gradient(top, #3498db, #2980b9); 
    background-image: -o-linear-gradient(top, #3498db, #2980b9); 
    background-image: linear-gradient(to bottom, #3498db, #2980b9); 
    font-family: Arial; 
    color: #ffffff; 
    font-size: 25px; 
    padding: 20px 40px 20px 40px; 
    text-decoration: none; 
} 
.btn:hover { 
    background: #3cb0fd; 
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db); 
    text-decoration: none; 
} 

HTML код отображения кнопок 3:

<button class="btn">Entry forms</button> 
<button class="btn">Scoresheets</button> 
<button class="btn">Results</button> 

Answer 1

Try обертывание оборачивать ваши кнопки в div со стилем text-align: center.

Я обновил свою скрипку здесь: http://jsfiddle.net/5prdmmak/2/

Answer 2

Вы можете обернуть три <buttons> «S внутри <div> и назначить text-align: center к этому <div>. Кроме того, чтобы добавить равное пространство между тремя кнопками, вы можете добавить margin-right: 10px; в .btn:first-child, .btn:nth-child(2) с помощью CSS.

.btn { 
 
     background: #3498db; 
 
     background-image: -webkit-linear-gradient(top, #3498db, #2980b9); 
 
     background-image: -moz-linear-gradient(top, #3498db, #2980b9); 
 
     background-image: -ms-linear-gradient(top, #3498db, #2980b9); 
 
     background-image: -o-linear-gradient(top, #3498db, #2980b9); 
 
     background-image: linear-gradient(to bottom, #3498db, #2980b9); 
 
     font-family: Arial; 
 
     color: #ffffff; 
 
     font-size: 25px; 
 
     padding: 20px 40px 20px 40px; 
 
     text-decoration: none; 
 
    } 
 
    .btn:hover { 
 
     background: #3cb0fd; 
 
     background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); 
 
     background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); 
 
     background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); 
 
     background-image: -o-linear-gradient(top, #3cb0fd, #3498db); 
 
     background-image: linear-gradient(to bottom, #3cb0fd, #3498db); 
 
     text-decoration: none; 
 
    } 
 
#buttons { 
 
    text-align: center; 
 
} 
 

 
.btn:first-child, .btn:nth-child(2) { 
 
    margin-right: 10px; 
 
}

<center><img src="http://www.placehold.it/350x150" /></center> 
 
<div id="buttons"><button class="btn">Entry forms</button> 
 
<button class="btn">Scoresheets</button> 
 
<button class="btn">Results</button></div>

Answer 3

Вы можете поместить их в DIV с текстом выравнивать: центр

<div style="text-align:center;"> 
<button class="btn">Entry forms</button> 
<button class="btn">Scoresheets</button> 
<button class="btn">Results</button> 
</div> 

Answer 4

Вы можете назначить код для DIV, как упоминалось выше, или к столу с

<table style="text-align:center;"> 
    <tr> 
    <td> 
     first_button_data_here 
    </td> 
    <td> 
     second_button_data_here 
    </td> 
    <td> 
     third_button_data_here 
    </td> 
    <tr> 
</table>