在一行上垂直对齐两个段落，一个在中间，一个在右边

Question

根据 W3Schools

The align attribute is not supported in HTML5. Use CSS instead.

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

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

这是我到目前为止的想法，因此 text-align 什么都不做...:[=15=]

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

p {
   display: inline-block;
}

.center {
  margin-left:50%;

}

.right {
  float: right;
}

Answer 2

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

中 .center 段落的上方

请参阅以下代码段以供参考。

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 3

根据你的描述，几乎没有什么可以回答的。

开始：

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，其中元素可以随时换行到下一行 （除非为两个元素都设置了最大宽度） ;)

Answer 4

一个简单的解决方案：

.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 , 该元素将与 window).

相关

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

您需要了解的一些基础知识：

段落元素只是容器的一种形式。其中的文本基本上是另一个元素本身。
text-align 对齐元素内的内容。因此，文本与段落元素的边界对齐。
段落元素的默认值为 display: block。这意味着它的宽度跨越其父元素的整个宽度（或者 window 以防未声明容器）。所以，text-align会有明显的效果。
display: inline-block 将使应用它的元素的边框缩小到其内容的大小。由于 text-align 影响的是内容，而不是元素本身，因此您的段落元素不会移动。

Answer 5

您可以使用 Flexbox 和 position 属性:

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

在一行上垂直对齐两个段落，一个在中间，一个在右边

Vertically align two paragraphs on one line, one in center one on right

css

html

text-alignment