HTML如何对齐文本中心，并以一定的间距对齐？

Question

• 我要“我，中心！”在页面的中央。
• 我要“我，不对！”右边有一些边距（例如10px）。
• 我想要他们成排。

谢谢！

p {
  text-align: center !important;
}

pp {
  float: right;
  margin-right: 10%;
}

<pp>me, not right!</pp>
<p>me, center!</p>

Answer 1

pp不是有效的HTML标记。

不过，您快到了。如果我理解正确，以下内容将使您走上正确的道路。设置一个段落，使文本居中对齐，然后向右浮动一些span标签。

p {
  text-align: center;
}

.push-right {
  float: right;
  margin-right: 10px;
}

<p>text align center <span class="push-right">text align right</span></p>

---

要回答your question in the comments，听起来您需要重置body和html标签的边距，以确保p标签覆盖实际页面的整个宽度

添加这些附加规则应该可以在假设没有其他复杂布局等条件之后实现您的目标。

html,
body {
  width: 100%;
  margin: 0;
}

p {
  width: 100%;
  text-align: center;
  display: block;
}

.push-right {
  float: right;
  margin-right: 10px;
}

这应该确保html和body标签不会将页面上的所有内容都向内推，而且还必须使用 block强制所有段落标签覆盖页面的整个宽度样式元素属性。

Answer 2

我会这样，将两个paragrahps放在一个相对放置的容器中；然后我将.right段落设置为position: absolute，并以此居中初始段落将使用容器的整个宽度并完美居中。

p {
  text-align: center;
  margin: 0;
}

.right {
  position: absolute;
  right: 0;
  margin-right: 10%;
}

.container {
  position: relative;
}


/* Following styles just for presentation */

p {
  border: 1px solid red;
  background-color: lightblue;
}

p.right {
  border: 1px solid green;
  background-color: pink;
}

<div class="container">
  <p class="right">me, not right!</p>
  <p>me, center!</p>
</div>

Answer 3

我认为您想要的是将段落标记显示为嵌入式。 Float会将元素推到页面的末尾或开始，具体取决于float：left或float：right。

<div class="container">
    <p>me center</p>
    <p>me, not right</p>
</div>

样式表：

.container {
    display: inline-flex;
    justify-content: center;
    width: 100%;
}

p {
    margin-right: 10px /* however much margin you want. */
}