棘手的是,我有一个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;
}
发布于 2013-04-24 06:50:46
我能想到的主要选项有两个:
1)将h3设置为display: inline
,并将父元素设置为text-align: center
发布于 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;
}
发布于 2013-04-24 06:46:07
您可以在h3上使用display:inline-block;而不是display:block;
https://stackoverflow.com/questions/16180356
复制相似问题