Question

这是fiddle demo 我想将组2与div的中心对齐，以便div的下边框与文本的中间对齐。但是，当我为文本指定宽度时，它无法与中心对齐。如果我删除宽度，则文本占据整行，因此无法看到div的下边框。我该如何解决这个问题？

HTML code：

<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/

Answer 2

你可以尝试给.group-name p - ＆gt;保证金：0自动;

.group-name p{
  display:block;
  margin-bottom: -9px;
  width:100px;

  /* add this line */
  margin: 0 auto;

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

Answer 3

如果你想在中心加上你可以做的宽度。

group-name{
  border-bottom: 1px solid #979797;
}
.group-name p{
  display:block;
  margin: 0 auto;
  margin-bottom: -11px;
  width: 60px;
  font-family: "Open Sans",sans-serif;
  font-size: 18px;
  color: #16A085;
  background-color: #F8F8F8;
}

JSFiddle

Answer 4

如果要在块上设置宽度，则需要使用margin:auto（或margin-left:auto; margin-right:auto;）将块级元素对齐到行的中间

Example

否则你可以将元素设为inline-block元素，然后给它一个宽度：

inline-block

Answer 5

只需使用text-align属性

即可

text-align:center;

DEMO

Answer 6

只需将text-align添加到您的css类中，如下所示：

  .group-name{
      border-bottom: 1px solid #979797;
        text-align:center;
    }

fiddle demo

Answer 7

请参阅此JS Fiddle

.group-name {
    border-bottom: 1px solid #979797;
}
.group-name p {
    display:block;
    margin-bottom: -9px;
    text-align: center;
    font-family:"Open Sans", sans-serif;
    font-size: 18px;
    color: #16A085;
    background-color: #F8F8F8;
}

Answer 8

使用text-align

text-align: center;

你谈论的是第2组，但你的代码中没有它？

Answer 9

尝试添加text-align和text-decoration属性

.group-name p{
  display:block;
  margin-bottom: -9px;
  font-family: "Open Sans",sans-serif;
  font-size: 18px;
  color: #16A085;
  background-color: #F8F8F8;

  text-align:center;
  text-decoration:underline;
}

Answer 10

更新CSS -

.group-name{
  border-bottom: 1px solid #979797;
  text-align:center;
}

Answer 11

使用text-align属性

.group-name{
  border-bottom: 1px solid #979797;
    text-align:center;
}

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

11 个答案: