Html 在页面中心将按钮彼此相邻放置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27671709/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Position buttons next to each other in the center of page
提问by Hollywood
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>
回答by Ammargraph
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' :)
这使您的按钮内联对齐并“并排”:)
回答by gab06
jsfiddle:http://jsfiddle.net/mgtoz4d3/
jsfiddle：http : //jsfiddle.net/mgtoz4d3/
I added a container which contains both buttons. Try this:
我添加了一个包含两个按钮的容器。尝试这个：
CSS:
CSS：
#button1{
width: 300px;
height: 40px;
}
#button2{
width: 300px;
height: 40px;
}
#container{
text-align: center;
}
HTML:
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>
回答by The Codesee
This can be solved using the following CSS:
这可以使用以下方法解决CSS：
#container {
text-align: center;
}
button {
display: inline-block;
}
display: inline-blockwill put the buttons side by side and text-align: centerplaces the buttons in the center of the page.
display: inline-block将按钮并排text-align: center放置并将按钮放在页面的中心。
JsFiddle: https://jsfiddle.net/026tbk13/
JsFiddle：https://jsfiddle.net/026tbk13/
回答by Prashanth VG
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>回答by Darwin Airola
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.
利用常规按钮并将 display 属性设置为 inline 以将按钮居中放置在一行上。将 display 属性设置为 inline-block 也会将它们放在同一行上，但它们不会通过该 display 属性设置居中。
回答by Rifatul Islam Chowdhury
.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>
}
}
回答by kesava reddy
Have both the buttons inside a div as shown below and add the given CSS for that div
将两个按钮放在一个 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>回答by Souvik Guria
your code will look something like this ...
你的代码看起来像这样......
<!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>
