All geek questions in one place

Place buttons next to each other in the center of the page

I'm trying to put two buttons next to each other in the center of the page, and also make the buttons static when the page is resized.

<!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>
+5
source share
6 answers

You can add this style to your buttons:

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


it makes your buttons align the lines and side by side :)

+8
source

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

I added a container containing both buttons. Try the following:

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>
+6
source

, CSS:

#container {
  text-align: center;
}

button {
  display: inline-block;
}

display: inline-block , text-align: center .

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

+4

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

Hope this answers your question.

.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>
Run code
+1
source

Use regular buttons and set the display property to a built-in value to center the buttons on one line. Setting the display property to the inline block also puts them on the same line, but they will not be centered using this display property.

0
source 
.wrapper{
  float:left;
  width:100%;
  text-align:center;
}
.button{
  display:inline-block;
}

<div class="wrapper">
  <button class="button">Button1</button>
  <button class="button">Button2</button>
</div>

}

0
source

Source: https://habr.com/ru/post/1569166/

More articles:


All Articles