Позиционные кнопки рядом друг с другом в центре страницы

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

<!doctype html> 
<html lang="en"> 

<head> 
<style> 
#button1{ 
width: 300px; 
height: 40px; 

} 
#button2{ 
width: 300px; 
height: 40px; 
} 
</style> 

<meta charset="utf-8"> 
<meta name="Homepage" content="Starting page for the survey website "> 

<title> Survey HomePage</title> 
</head> 
<body> 

<img src="kingstonunilogo.jpg" alt="uni logo" style="width:180px;height:160px"> 
<button type="button home-button" id="button1" >Home</button> 
<button type="button contact-button" id="button2">Contact Us</button> 
</body> 
</html>

источник

2014-12-27 Hollywood

Что вы подразумеваете под «бок о бок»? – gab06

Я имею в виду, что они рядом друг с другом, с приведенным выше кодом они рядом друг с другом, но меняют положение при изменении размера страницы. Также я хотел бы иметь их бок о бок в центре страницы. – Hollywood

Не ответ на вопрос, но вы можете рассмотреть возможность использования более семантического '' типа навигации, а не с помощью кнопок. – apaul

вы можете добавить этот стиль для кнопок:

#button1 , #button2 { 
display:inline-block; 
/**other codes**/ 
}

это сделать ваши кнопки выравнивания инлайн и «бок о бок» :)

источник

2014-12-28 11:46:27 Ammargraph

Это не помещает их в центр страницы. – gab06

jsfiddle:http://jsfiddle.net/mgtoz4d3/

Я добавил контейнер, который содержит обе кнопки. Попробуйте это:

CSS:

#button1{ 
    width: 300px; 
    height: 40px; 
} 
#button2{ 
    width: 300px; 
    height: 40px; 
} 
#container{ 
    text-align: center; 
}

HTML:

<img src="kingstonunilogo.jpg" alt="uni logo" style="width:180px;height:160px"> 
<br><br> 
<div id="container"> 
    <button type="button home-button" id="button1" >Home</button> 
    <button type="button contact-button" id="button2">Contact Us</button> 
</div>

источник

2014-12-27 22:02:49 gab06

В jsfiddle, если вы изменяете размер окна результатов достаточно долго, кнопки располагаются рядом друг с другом. – gab06

Это может быть решена с помощью следующих CSS:

#container { 
    text-align: center; 
} 

button { 
    display: inline-block; 
}

display: inline-block поместит кнопки бок о бок и text-align: center местами кнопки в центре страницы.

JsFiddle: https://jsfiddle.net/026tbk13/

источник

2016-05-19 20:23:53

jsFiddle:http://jsfiddle.net/7Laf8/1302/

Я надеюсь, что это ответ на ваш вопрос.

.wrapper { 
 
    text-align: center; 
 
    display: inline-block; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
}

<div class="wrapper"> 
 
    <button class="button">Hello</button> 
 
    <button class="button">Another One</button> 
 
</div>

источник

2016-08-30 10:38:02

Используйте обычные кнопки и установите свойство дисплея INLINE для центровки кнопки на одной строке. Установка свойства отображения в встроенный блок также помещает их в одну строку, но они не будут центрироваться с помощью этого свойства свойства отображения.

источник

2016-10-10 23:28:31

Позиционные кнопки рядом друг с другом в центре страницы

ответ

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