1

棘手的是，我有一个 HTML 标题，上面应用了边框顶部和边框底部。我可以将它居中以使边框与元素的宽度相同吗？现在我不得不悲惨地使用宽度，这根本不是一个好的解决方案。

在这里查看演示：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;
}
4

6 回答 6

3

我能想到的主要有两个选择：

1) 将 h3 设置为display: inlineAND 将父元素设置为text-align: center

于 2013-04-23T22:50:46.127 回答
2

您可以添加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-23T22:44:13.480 回答
0

您可以使用 display:inline-block; 在 h3 上而不是 display:block;

于 2013-04-23T22:46:06.980 回答
0

我建议使用 display:inline，但如果这破坏了您的布局并且您不想修复它。你可能想试试桌子。它似乎按照您在演示中想要的方式工作。不是 100% 确定它仍然可行的 CSS。

display: table;
于 2013-04-23T22:51:15.770 回答
0

如果您希望使标题与中心对齐...

http://codepen.io/anon/pen/xoFKH

突出显示 div 背景以使其明显：/

于 2013-04-23T22:51:17.063 回答
0

这对我有用。

.heading__wrap {
  display: table;
  margin: 0 auto;
}

.heading__wrap .heading__title {
  border-bottom: 2px solid #7f4cab;
  padding-bottom: 12px;
  font-size: 36px;
  font-weight: 300;
  line-height: 42px;
  margin-bottom: 50px;
}
<div class="heading__wrap">
  <h2 class="heading__title">Music to Our Ears</h2>
</div>

于 2018-08-01T20:15:02.177 回答