html - 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>

---

要在评论中回答您的问题，听起来您需要重置body和html标签的边距，以确保p标签跨越实际页面的整个宽度。

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

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

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

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

这应该确保htmland标签不会将页面上的所有内容向内推一点，并且还强制所有段落标签使用块样式元素属性body跨越页面的整个宽度。

Answer 2

我会这样做，我会将两个段落放在一个容器中，我相对定位它；然后我只是将.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. */
}