Question

我有这个框，它有三个内嵌块文本元素，左右文本正在工作，但中间的文本没有正确居中。 View here

＆＃13;

div.row #banner {
  padding-top: 0;
  margin-bottom: 0.8em;
  background-color: #FF9935;
  border: 1px solid #ccc;
  color: #000;
}

div.row #banner p {
  margin-bottom: 0;
}

div.row #banner .shordy {
  font-family: lato, serif;
  font-size: 1.1em;
  font-weight: 900;
  margin-top: 0.5em;
  line-height: 1.1em;
}

div.row #banner #hero {
  font-family: lato, serif;
  font-size: 1.3em;
  font-weight: 900;
}

.inline-block {
  display: inline-block;
}

#inline1 {
  float: left;
}

#inline3 {
  float: right;
}

.banner {
  display: inline-block;
}

＆＃13;

<body>
  <div class="container-fluid text-center" id="banner">
    <p class="text-left inline-block shordy" id="inline1">We're On Your Side...</p>
    <span class="text-center" id="hero" style="text-align: center;">Welcome To Property Snagging Direct...</span>
    <p class="inline-block text-right shordy" id="inline3"><i>Your Independent, Specialist Property Inspectors</i></p>
  </div>
  <!-- text-center -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</body>

＆＃13;

请展开结果框，以便了解我正在谈论的内容。

*它是＆＃34;欢迎物业窃取直接......＆＃34;没有居中*

Answer 1

如果要将其内容居中，则需要将跨度设置为其父级的100％宽度。现在，跨度只是文本本身的宽度 - 因此它无法以实际父对象为中心。

只需添加类似

的内容

span{
  width:100%;
}

Answer 2

您可能还想在英雄范围内添加内联块。

#hero {
  display: inline-block;
}
.three {
  width: 33.33%;
  background-color: gray;
  border: 1px solid #000;

在这里小提琴：https://jsfiddle.net/cagvhpe5/2/ 我只添加了背景颜色和边框，因此您可以在展开时看到宽度发生变化。不仅如此，您可能还想使用表格显示。

Answer 3

它以两个浮动元素之间的自由空间为中心，你可以看到，如果你缩短了正确的文本。

https://jsfiddle.net/ovv1utt4/1/

要避免这种情况，您可以使用此CSS中心该元素：

#hero {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  }

https://jsfiddle.net/9onnmhtu/1/

Answer 4

您尝试设置为text-align元素的<span class="text-center" id="hero">属性仅适用于块元素（带有display: block的元素），并影响其文本和inline-*的内容。因此，您应该将其设置为此span的父级（即<div id="banner">），以使span居中。

此外，您的inline-block类对#inline和#inline3元素没有任何作用，因为它们是float的元素，并且float属性会覆盖{{ 1}}设置（使其有效display，但有特殊的放置规则）。

内联块文本不居中

4 个答案: