我曾尝试将我的按钮放在中间，但我不知道该怎么做，因为我不擅长 CSS。
我不知道，如果我在我的代码中这样做是正确的，但我已经尝试将它放在中心。
我应该怎么做才能将按钮放在屏幕中间？
<style>
body {
background-image: url(http://1-background.com/images/silk/grey-silk-website-background.jpg);
}
.button {
display:block;
text-align:center;
}
h1{
text-align: center;
}
.remove{
color: red;
align-items: center;
}
.create{
color: green;
align-items: center;
}
.test{
color: blue;
align-items: center;
}
</style>
<body>
<form>
<h1>
<select id="mySelect" style="width:400px" size="10" multiple>
<option id=" hello">hello</option>
</select>
<br />
<input type="text" name="name" value="text " style="width:350px" />
</h1>
</form>
<br>
<la class=" remove"><button onclick="myRemove()" style=" align-items: center; width: 225px"><h2 class="remove"><img id="hi" src="http://outlooksettings.com/wp-content/uploads/2014/12/remove-md.png" width="40"> Remove</h2></button>
</la>
<la class="create"><button type="button" onclick="myCreate()" style=" align-items: center; width: 225px"><h2 class="create"><img id="hi" src="https://cdn0.iconfinder.com/data/icons/large-glossy-icons/512/Create.png" width="40">Create</h2></button>
</la>
<la class="test"><button type="button" onclick="test()" style=" align-items: center; width: 225px"><h2 style="width:80px" class="test"><img id="hi" src="https://lh4.ggpht.com/lUcLbewm2mffnhc1_BbZYi5zjEXAzfeYf73cg2SXjFDX3_xNnHGUMkSRdh86TN8HqcSq7Qr3vA=w512" width="40">File</h2></button>
</la>
最佳答案
我会将它们放在一个 div 中并将以下 CSS 应用于该 div:
.my-div {
width: 100%;
text-align: center;
}
要了解更多信息，请查看 this出。
您案例的结果:
<!DOCTYPE html>
<html xmlns = "http://www.TedTheSpeedlearner.com"
xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation = "http://www.TedTheSpeedlearner.com
SVG_Red_Circle.xsd">
<head>
<title>SVG Line</title>
<link rel = "stylesheet" type = "text/css" href = "SVG_Lines.css">
</link>
</head>
<style>
body {
background-image: url(http://1-background.com/images/silk/grey-silk-
website-background.jpg);
}
.button {
display:block;
text-align:center;
}
h1{
text-align: center;
}
.remove{
color: red;
align-items: center;
}
.create{
color: green;
align-items: center;
}
.test{
color: blue;
align-items: center;
}
.my-div {
width: 100%;
text-align: center;
}
</style>
<body>
<form>
<h1>
<select id="mySelect" style="width:400px" size="10" multiple>
<option id=" hello">hello</option>
</select>
<br />
<input type="text" name="name" value="text "
style="width:350px" /></h1>
</form>
<br>
<div class="my-div">
<la class=" remove"><button onclick="myRemove()" style=" align-items:
center; width: 225px"><h2 class="remove"><img id="hi"
src="http://outlooksettings.com/wp-content/uploads/2014/12/remove-md.png"
width="40"> Remove</h2></button></la>
<la class="create"><button type="button" onclick="myCreate()" style="
align-items: center; width: 225px"><h2 class="create"><img id="hi"
src="https://cdn0.iconfinder.com/data/icons/large-glossy-icons/512/Create.png"
width="40">Create</h2></button></la>
<la class="test"><button type="button" onclick="test()" style=" align-
items: center; width: 225px"><h2 style="width:80px" class="test"><img id="hi"
src="https://lh4.ggpht.com/lUcLbewm2mffnhc1_BbZYi5zjEXAzfeYf73cg2SXjFDX3_xNnHGU
MkSRdh86TN8HqcSq7Qr3vA=w512" width="40">File</h2></button></la>
</div>
</body>
</html>关于html - 中间的 CSS 按钮 "Center"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31069735/