Question

棘手的一个，我有一个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;
}

Answer 1

我能想到两个主要选择：

1）将h3设置为display: inline并将父元素设置为text-align: center

Answer 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;
}

这当然会影响布局行为。

编辑 OP希望文本居中：

要保持文本居中，请将text-align: center添加到父级：

div {
    padding-top: 30px;
    height: 100px;
    width: 300px;
    margin: 0 auto;  
    background-color: Moccasin;
     text-align: center;
}

Answer 3

你可以使用display：inline-block;在h3而不是display：block;

Answer 4

我建议，显示：内联，但如果这会破坏您的布局而您不想修复它。你可能想尝试一下表。它似乎在您的演示中以您希望的方式工作。不过100％肯定它仍然可行的css。

display: table;

Answer 5

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

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

突出显示div背景以使其显而易见：/

Answer 6

<div class="heading__wrap">
   <h2 class="heading__title">Music to Our Ears</h2>
</div>

<style type="text/css">
    .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;
    }

</style>

这对我有用。

如何使具有与宽度匹配的边框的HTML元素居中

6 个答案: