Question

我正在尝试为我的网站创建一个标题，但是我想找出最好的方法来对齐它。

标题符合＆＃34;欢迎来到XXXX大学的SHEP＆＃34;。但是，我试图让句子围绕“＃34; SHEP＆＃34;”这个词。换句话说，我试图制作＆＃34; SHEP＆＃34;句子的一部分在页面上是死点。

我尝试了一些方法，例如<h1>Welcome to <span> SHEP </span> at the University of XXX</h1>并设置范围以对齐中心，但我无法使其正常工作。

我希望实现＃1中显示的外观，而不是＃2： centered

Answer 1

HTML：

<div class="container">
    <h1>
        <span>Welcome to</span>
        SHEP
        <span>at the University of XXX</span>
    </h1>
</div>

CSS：

.container {
   display: block;
   text-align: center;
}

h1 {
    position: relative;
    display: inline-block;
    text-align: center;
}

span {
    position: absolute;
    top: 0;
    white-space: nowrap;
}

span:nth-of-type(1) { right: 100%; }
span:nth-of-type(2) { left: 100%; }

请参阅Fiddle

Answer 2

将display:table用于包装div，然后display:table-cell用于子元素。它们会均匀地占据包装纸的宽度。所以，你的标记会是这样的：

<强> HTML

<div id="nav-wrap">
  <div id="nav-left">
    <p>Welcome to</p>
  </div>
  <div id="nav-center">
    <p>SHEP</p>
  </div>
  <div id="nav-right">
    <p>at the University of XXX</p>
  </div>
</div>

<强> CSS

#nav-wrap {
  display:table;
  width:100%;
}
#nav-wrap > div {
  display:table-cell;
  text-align:center;
  border:1px solid black;    /* here to show how the cells are aligned */
  width:33%;
}

当然，您可以相应地为每个孩子div设置文本样式。

http://codepen.io/bbennett/pen/zxKZLb

Answer 3

使用span在padding中创建空间，它会显示文本居中的外观：

span{
   padding: 0 10px;
}

Answer 4

您可以使用margin，例如：

span {
    margin: 25%;
}

http://jsfiddle.net/yjw0t27r/1/

Answer 5

您可以使用伪元素:before和:after并使用absolute定位，现在h1与Shep字对齐

div {
  text-align: center
}
h1 {
  display: inline-block;
  position: relative;
  border: 1px solid red;
}
h1:before {
  content: 'Welcome to ';
  position: absolute;
  right: 50px;
  width: 238px;
}
h1:after {
  content: ' at the University of XXXX';
  position: absolute;
  left: 50px;
  width: 434px;
}

<div>
  <h1>SHEP</h1>
</div>

Answer 6

您最好的选择是为标题标记提供以下内容：

h1{
  display: inline-block;
  position: relative;
  left: 50%;
  margin-left: -120px;
}

Margin-left应该设置为标题前半部分的宽度。因此，如果'Welcome to SH'为120像素宽，则将其作为负边距。从本质上讲，你将标题从左侧推开50％，然后使用'margin-left'向后移动多个像素。

codepen：http://codepen.io/anon/pen/KwgWQo

Answer 7

我假设你只想水平居中。

我的解决方案使用带有justify-content: center的flexbox来对齐容器中居中的项目。这些项目是标题的三个组成部分：前面的文字，“单词”，后面的文字。

HTML：

<h1 class="word-centered"><span>Welcome to the great </span><span>Stackoverflow</span><span>  universitiy</span></h1>

标题分为三部分，第二部分span中的中心字。

CSS：

/* make the items flex (in a row by default); center the items in the container */
.word-centered {
  display: flex;
  justify-content: center;
}

/* make the left and right part use all remaining space; padding to space the words */
.word-centered span:nth-child(1), .word-centered span:nth-child(3) {
   flex: 1;
   margin: 0 5px;
}

/* since the first span uses all space between the middle item and the left edge, align the text right */
.word-centered span:nth-child(1) {
  text-align: right;
}

演示：http://jsbin.com/foduvuvoxa/1

这适用于FF 34和Chrome 39开箱即用，需要IE 10/11的供应商前缀。

如何根据某个单词对标题进行居中

7 个答案: