把按钮放在页面的中心位置

I'm trying to position the two buttons next to each other in the center of the page and also make the buttons static as you resize the page.

我试着将两个按钮放在页面的中心位置，并在调整页面大小时使按钮保持不变。

<!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 个解决方案

#1

you can add this style to your buttons :

你可以在按钮上添加这个样式:

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

this make your buttons align inline and 'side by side' :)

这样可以让你的按钮对齐并“并排”:)

#2

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

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

I added a container which contains both buttons. Try this:

我添加了一个包含两个按钮的容器。试试这个:

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>

#3

This can be solved using the following CSS:

这可以通过以下CSS来解决:

#container {
  text-align: center;
}

button {
  display: inline-block;
}

display: inline-block will put the buttons side by side and text-align: center places the buttons in the center of the page.

显示:inline-block将把按钮并排放在一起，文本对齐:中心将按钮放在页面的中心位置。

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

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

#4

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

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

I 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>

#5

Utilize regular buttons and set the display property to inline in order to center the buttons on a single line. Setting the display property to inline-block will also put them on the same line, but they will not be centered via that display property setting.

使用常规按钮并将显示属性设置为inline，以便将按钮居中于一行。将显示属性设置为inline-block也会将它们放在相同的行上，但是它们不会以显示属性设置为中心。

#1