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

【问题标题】：How can I align a text that has a specific width at the center of a div?如何在 div 的中心对齐具有特定宽度的文本？
【发布时间】：2014-09-20 21:22:45
【问题描述】：

这是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;
}

【问题讨论】：

你试过text-align:center吗？

标签： html css

【解决方案1】：

只需使用text-align 属性

text-align:center;

DEMO

【讨论】：

【解决方案2】：

只需像这样将 text-align 添加到您的 css 类中：

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

fiddle demo

【讨论】：

【解决方案3】：

参考这个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;
}

【讨论】：

【解决方案4】：

使用文本对齐

text-align: center;

您谈论的是第 2 组，但它不在您的代码中？

【讨论】：

【解决方案5】：

你可以尝试给 .group-name p -> margin: 0 auto;

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

【讨论】：

【解决方案6】：

尝试添加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;
}

【讨论】：

【解决方案7】：

从您的描述来看，您似乎正试图将文本居中放置在父 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/

【讨论】：

【解决方案8】：

如果你希望它在中心加上宽度，你可以做到。

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

【讨论】：

【解决方案9】：

按照 CSS 更新 -

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

【讨论】：

【解决方案10】：

使用文本对齐属性

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

【讨论】：

【解决方案11】：

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

Example

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

inline-block

【讨论】：