html - 如何在 div 的中心对齐具有特定宽度的文本？

Question

这是 fiddle demo我想将第 2 组与 div 的中心对齐，以便 div 的底部边框与文本的中间对齐。但是，当我为文本分配宽度时，它无法与中心对齐。如果我去掉宽度，那么文字就会占满整行，这样就看不到div的底边框了。我该如何解决这个问题？

HTML代码:

<div class="group-name">
    <p>Group1</p>
</div>

CSS:

.group-name{
  border-bottom: 1px solid #979797;
}
.group-name p{
  display:block;
  margin-bottom: -9px;
  width:100px;


  font-family: "Open Sans",sans-serif;
  text-align:center;
  font-size: 18px;
  color: #16A085;
  background-color: #F8F8F8;
}

Answer 1

根据您的描述，您似乎正试图将文本居中放置在父 div 边框的中间:

.group-name{
  border-bottom: 1px solid #979797;
  width:100%;
  height: 10px;
}
.group-name p{
  display:block;
  margin: 0 auto -7px ;
  background: #fff;
  width:100px;
  text-align:center;
}

http://jsfiddle.net/92Uu7/4/