Question

我正在尝试将两个按钮放在页面中央，并在调整页面大小时使按钮保持静止。

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

Answer 1

您可以将此样式添加到按钮中：

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

这使得您的按钮可以并排排列并排在一起＆＃39; ：）

Answer 2

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>

Answer 3

这可以使用以下CSS来解决：

#container {
  text-align: center;
}

button {
  display: inline-block;
}

display: inline-block将按钮并排放置，text-align: center将按钮放在页面中央。

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

Answer 4

<强>的jsfiddle： http://jsfiddle.net/7Laf8/1302/

我希望这能回答你的问题。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

利用常规按钮并将显示属性设置为内联，以便将按钮置于单行中心。将display属性设置为inline-block也会将它们放在同一行，但它们不会通过该display属性设置居中。

Answer 6

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

}

Answer 7

将两个按钮都放在div内，如下所示，然后为该div添加给定的CSS

#button1, #button2{
width: 200px;
height: 40px;
}

#butn{
    margin: 0 auto;
    display: block;
}

<div id="butn">
	<button type="button home-button" id="button1" >Home</button>
	<button type="button contact-button" id="button2">Contact Us</button>
<div>

Answer 8

您的代码将如下所示...

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

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

}
#button2{
width: 300px;
height: 40px;
}
display:inline-block;
</style>

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

 <title> Survey HomePage</title>
</head>
<body>
<center>
<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>
</center>
</body>
 </html>

Answer 9

如果您正在使用引导程序，则以下解决方案将起作用。

<div>
    <button type="submit" class="btn btn-primary" >Invoke User Endpoint</button>
    <button type="submit" class="btn btn-primary ml-3">Invoke Hello Endpoint</button>
</div>

位于页面中心的按钮彼此相邻

9 个答案: