如何使具有匹配宽度的边框的HTML元素居中
如何使具有匹配宽度的边框的HTML元素居中
提问于 2013-04-24 06:40:39
棘手的是，我有一个HTML标题，上面应用了顶部边框和底部边框。是否可以将其居中，使边框与元素的宽度相同？现在我不得不痛苦地使用width，这根本不是一个好的解决方案。
请看这里的演示：http://codepen.io/anon/pen/KIJAh
HTML
<div>
<h3 class="removeMe">All your base</h3>
</div>CSS
div {
padding-top: 30px;
height: 100px;
width: 300px;
margin: 0 auto;
background-color: Moccasin;
}
h3 {
text-align: center;
display: block;
border-top: 1px solid black;
border-bottom: 1px solid black;
margin: 0 auto;
}
.removeMe {
width:160px;
}回答 6
Stack Overflow用户
回答已采纳
发布于 2013-04-24 06:50:46
我能想到的主要选项有两个：
1)将h3设置为display: inline，并将父元素设置为text-align: center
Stack Overflow用户
发布于 2013-04-24 06:44:13
您可以将display: inline添加到您的h3选择器：
h3 {
text-align: center;
display: block;
border-top: 1px solid black;
border-bottom: 1px solid black;
margin: 0 auto;
display: inline;
}这当然会影响布局行为。
EDIT OP希望文本居中：
要使文本居中，请将text-align: center添加到父级：
div {
padding-top: 30px;
height: 100px;
width: 300px;
margin: 0 auto;
background-color: Moccasin;
text-align: center;
}Stack Overflow用户
发布于 2013-04-24 06:46:07
您可以在h3上使用display:inline-block；而不是display:block；
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16180356
复制相关文章
相似问题