Html 如何根据某个单词将标题居中

我试图为我的网站创建一个标题，但是我试图找出最好的方式来对齐它

标题是“欢迎来到XXXX大学的SHEP”。然而，我试图让这个句子以“SHEP”这个词为中心。换句话说，我试图让句子的“SHEP”部分成为页面的死角

我已经尝试过一些方法，例如<代码>欢迎来到XXX大学的SHEP /CODE >，并设置跨度来对齐中心，但是我不能很好地实现它。

---

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

您可以使用

边距

，例如：

span {
    margin: 25%;
}

---

对于包装

div

使用

display:table

，然后对于子元素使用

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>

当然，您会在每个子

div

中相应地设置文本样式

---

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

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

左边距应设置为页眉前半部分的宽度。所以，如果“欢迎来到SH”是120像素宽，那么把它作为左边的负边距。从本质上讲，您将标题推离左侧50%，然后使用“左边距”将其向后移动多少像素

---

codepen here:

您可以使用伪元素

：before

和

：before

和

：after

并使用

绝对值定位它现在h1与Shep单词对齐


div{
文本对齐：居中
}
h1{
显示：内联块；
位置：相对位置；
边框：1px纯红；
}
h1：之前{
内容：“欢迎光临”；
位置：绝对位置；
右：50px；
宽度：238px；
}
h1：之后{
内容：“在XXXX大学”；
位置：绝对位置；
左：50px；
宽度：434px；
}

谢普
HTML：

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

请参见在
span
中使用
填充创建空格，它将显示文本居中的外观：

span{
   padding: 0 10px;
}

我想你只想水平居中

我的解决方案利用flexbox和
justify content:center
来对齐容器中居中的项目。这些项目是标题的三个组成部分：“单词”前的文本，以及“单词”后的文本

HTML:

演示：

这适用于FF 34和Chrome 39开箱即用，IE 10/11需要供应商前缀。
所说的“死点”是指水平和垂直居中吗？我是指水平居中，例如：你到底想要什么样的输出？@ankitchatbar-你能详细说明一下吗？使用
align items:center将此设置垂直居中也可以工作；高度：100%
在容器上。此解决方案非常出色，+1。但有些风格是非直观的，尤其是100%左右。您能详细说明一下吗？因为两个
span
s都是绝对定位的，所以您必须将第一个（左）
span
粘贴到“SHEP”容器的左边缘，这是通过将其位置移动到
right:100%
来实现的，这有效地满足了我们的要求。第二个跨度（左）的情况正好相反。哇，这比我想象的要聪明得多。但是，假设我希望“SHEP”的文本大小大于跨距。这会使文本垂直对齐到顶部（）。我该如何将其与底部对齐？@ashbrit，只需将
span.line height
的值设置为
h1.font size
。看见
.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%; }

span{
   padding: 0 10px;
}

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

/* 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;
}