Как разместить 2 кнопки в середине экрана

Я строю очень простой сайт, у него есть заголовок и 2 кнопки на нем со ссылками, когда вы нажимаете кнопки.Как разместить 2 кнопки в середине экрана

Я не знаю, как разместить кнопки. Прямо сейчас они оба отображаются рядом друг с другом в левой части экрана под моим заголовком. Я хочу, чтобы они отображались в середине экрана рядом друг с другом с примерно 100 пикселями между ними. Я видел сообщение, в котором вы можете поместить одну кнопку в середину экрана, но это не решает проблему с кнопкой 2 с интервалом.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
     <title>New Unit</title> 
    </head> 
    <body> 
     <div id="terminal_banner"> New Unit Landing Page </div> 
     <a href="#" class="button1">Button</a> 
     <a href="#" class="button1">Button</a> 
    </body> 
</html>

источник

2016-02-19 Morgunus

ли вы имеете в виду

<!DOCTYPE html> 

<html> 
<head> 
    <title>New Unit</title> 
    <link rel="stylesheet" href="website1.css"> 
</head> 
<body> 
<div id="terminal_banner"> New Unit Landing Page </div> 
    <div align="center" > 
    <a href="#" class="button1">Button</a> <!-- &nbsp; &nbsp; --> 
    <br> 
    <a href="#" class="button1">Button</a> 
    </div> 
</body> 
</html>

источник

2016-02-19 18:20:23 Mozfox

Закрыть, что получил их посередине, но как я могу перемещать m вниз, чтобы они всегда находились в середине экрана? Наверное, я мог бы сделать кучу divs, но, конечно, есть более элегантный способ? Извините, я так много учился. – Morgunus

Ищите тег '
' – Mozfox

Это супер удобно! BR как разрыв страницы или эквивалент ввода? – Morgunus

Как насчет:

<div id="terminal_banner"> New Unit Landing Page </div> 
<div class=button-wrap> 
    <a href="#" class="button">Button</a> 
    <a href="#" class="button">Button</a> 
</div> 

.button-wrap { 
    width: 100%; 
    height: 100vh; 
    position: relative; 
    text-align: center; 
} 
.button { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    margin: 50px; 
}

источник

2016-02-19 18:34:23 DB1500

Если вы хотите отцентрировать как по вертикали, так и по горизонтали в любое время (даже при изменении размеров окна):

<body> 
    <div style="position:fixed; bottom:50%; left:50%"> 
     <button>Button</button> 
     <button>Button</button> 
    </div> 
</body>

источник

2016-02-19 18:37:13

Это была лучшая вещь, о которой я думаю сегодня. Я действительно ценю это! – Morgunus

Как разместить 2 кнопки в середине экрана

ответ

Смежные вопросы