将两个段落垂直对齐在一行上，一个在中间，一个在右侧[重复]

Question

根据 W3Schools

HTML5 不支持align 属性。改用 CSS。

我想知道到底如何才能简单地将两个段落对齐在一行中。

我对弹性盒子解决方案持开放态度，但是，我不需要第三个虚拟段落作为起点。此外，生成一行和一列似乎使这个“简单”过于复杂？任务？

这是我到目前为止所想出的，因此text-align 什么都不做......：

p {
  display: inline-block;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

<div class="container">
  <p class="center">Center</p>
  <p class="right">Right</p>
</div>

Answer 1

您可以使用 Flexbox 和 positionproperty：

.container {
  position: relative; /* needs to be on the parent */
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
  align-items: center; /* and vertically */
}

.container > .right {
  position: absolute; /* needs to be on the child */
  right: 0;
}

@media (max-width: 480px) { /* adjust */
  .container {
    flex-direction: column; /* stacks flex-items vertically */
  }
  .container > .right {
    position: static; /* back to default */
    align-self: flex-end; /* aligns to the horizontal end */
  }
}

<div class="container">
  <p class="center">Center</p>
  <p class="right">Right</p>
</div>

Answer 2

p {
   display: inline-block;
}

.center {
  margin-left:50%;

}

.right {
  float: right;
}

Answer 3

如果我理解你的问题。您应该为两个段落添加一些百分比宽度，然后将float:right; 添加到它们两个中。另外，不要忘记将 .right 段落保留在 html 中的 .center 段落上方。

请参阅下面的 sn-p 以供参考。

p {
  display: inline-block;
}

.center {
  text-align: center;
  width: 33.3333%;
  float: right;
}

.right {
  text-align: right;
  width: 33.33333%;
  float: right;
}

<div class="container">
  <p class="right">Right</p>
  <p class="center">Center</p>
  
</div>

希望对您有所帮助。

Answer 4

根据你给出的小描述，没有什么可回答的。

开始：

flex 我愿意：

.container {
display:flex;
}
.center {
  flex:1;
  text-align: center;
}

.right {
  text-align: right;
}

<div class="container">
  <p class="center">Center</p>
  <p class="right">Right</p>
</div>

使用table-layout (IE8 & +)，我会这样做

.container {
  display: table;
  width: 100%;
}

p {
  display: table-cell;
}

.center {
  text-align: center;/* will use whole space avalaible*/
}

.right {
  text-align: right;
  width: 5em;/* a small value to shrink it on its content */
}

<div class="container">
  <p class="center">Center</p>
  <p class="right">Right</p>
</div>

grid，我愿意

.container {
  display:grid;
  grid-template-columns:1fr auto;
}


.center {
  text-align: center;
}

.right {
  text-align: right;
}

<div class="container">
  <p class="center">Center</p>
  <p class="right">Right</p>
</div

我不会使用 float 或 inline-block 元素可以随时换行到下一行 （除非为两个元素都设置了 max-width） ;)

Answer 5

一个简单的解决方案：

.container {
  position: relative;
  text-align: center;
}

.center {
  display: inline-block;
}

.right {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
}

在.right 上应用position: absolute 后，您可以将段落移动到下一个具有position: relative 的父元素中的任意位置（如果没有父元素设置position，则该元素将与窗口相关）。

text-align 在您的情况下不起作用的原因是display: inline-block。

你需要知道的一些基础知识：

• 段落元素只是容器的一种形式。其中的文本基本上是另一个元素本身。

• text-align 对齐元素内的内容。因此，文本与段落元素的边框对齐。

• 段落元素的默认值为display: block。这意味着它的宽度跨越其父元素的整个宽度（或窗口，如果没有声明容器）。因此，text-align 会产生可见的效果。

• display: inline-block 将使应用它的元素的边框缩小到其内容的大小。由于text-align 影响的是内容，而不是元素本身，因此您的段落元素不会移动。

Answer 6

.container {
  display:grid;
}

p {
  display: inline-block;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.left {
  text-align: left;
}

<div class="container">
  <p class="center">Center</p>
  <br>
  <p class="right">Right</p>
  <br>
  <p class="left">Left</p>
</div>