CSS：我不能在 DIV 元素中间放置按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3325049/
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
CSS: I can't put a button in the middle of a DIV element
提问by Alex
I'm using CSS buttons from this tutorial:
我正在使用本教程中的 CSS 按钮：
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
I need to put a button in the middle of a DIV so it's centered. But I can't!
我需要在 DIV 中间放一个按钮，使其居中。但我不能！
Here's the code of the button:
这是按钮的代码：
<a class="button" href="#"><span>Bring world peace</span></a>
And here's CSS:
这是 CSS：
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.button {
background: transparent url('bg_button_a.gif') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button span {
background: transparent url('bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
Here's the code I'm trying to use:
这是我尝试使用的代码：
<div align="center"><a class="button" href="#"><span>Bring world peace</span></a></div>
回答by Chris
the align attribute for the div element is deprecated. You're better off defining a class for that div, like so:
不推荐使用 div 元素的 align 属性。您最好为该 div 定义一个类，如下所示：
<div class="centerize">
<a class="button" href="#"><span>Bring world peace</span></a>
</div>
And the CSS:
和 CSS：
.centerize {
text-align: center;
}
Note however that setting the text-align will only affect the content inside the div. The div itself (should be) a block element, and depending on where it sits in the document structure, may not be centered itself.
但是请注意，设置 text-align 只会影响 div 内的内容。div 本身（应该）是一个块元素，并且取决于它在文档结构中的位置，它本身可能不会居中。
Just to make a little more certain, you can do something like this:
为了更确定一点，您可以执行以下操作：
.centerize {
display: block;
margin: 0 auto;
text-align: center;
}
Now you can apply centerize to any element, and that element should take up the entire browser's width and center-align its content.
现在您可以将 centerize 应用于任何元素，该元素应占据整个浏览器的宽度并居中对齐其内容。
回答by tjvr
The a.buttonis floated to the left. You could try float: none;on that element. margin: 0 auto;is also useful for center-aligning elements.
该a.button浮动到左边。你可以试试float: none;那个元素。margin: 0 auto;也可用于居中对齐元素。
Does that help?
这有帮助吗？
回答by Sarfraz
Modify the button class for these properties:
修改这些属性的按钮类：
.button{
margin-left:50%;
margin-right:50%;
position: relative;
}
And wrap your link in the div like this:
并将您的链接包装在 div 中，如下所示：
<div align="center">
<a class="button" href="#"><span>Bring world peace</span></a>
</div>
