文本对齐如何在 HTML/CSS 中工作答案

【问题标题】：How does text alignments work in HTML/CSS文本对齐如何在 HTML/CSS 中工作
【发布时间】：2021-01-13 18:42:16
【问题描述】：

我的问题是：对齐如何对内联和内联块元素起作用？我该如何控制呢？

我的目标是将 div 的内容与之前的 Text 对齐。但是如果你清空一些元素或改变它们的位置，就会发生有趣的对齐。

似乎内联/内联块元素的第一个子元素中的第一个字符用于在基线上进行对齐。如何指定用于对齐的字符或元素？

 <p>
  <span>Text</span>

  <span class="box">
    <span class="icon">icon</span>
    <span class="content">content</span>
  </span>
</p>

这是一个小提琴，看看我的意思： https://jsfiddle.net/u4kzhmpt/

.box {
  border: 1px solid black;
  display: inline-flex;
}

.icon {
  display: inline-block;
  padding: 20px;
  border-radius: 50%;
  background: gray;
}

.content {
  flex: 1;
  background: yellow;
  padding: 0 10px;
}

<p>
  <span>Text</span>

  <span class="box">
    <span class="icon">icon</span>
  <span class="content">content</span>
  </span>
</p>

<p>
  <span>Text</span>

  <span class="box">
    <span class="icon"></span>
  <span class="content">content</span>
  </span>
</p>

<p>
  <span>Text</span>

  <span class="box">
    <span class="icon">icon</span>
  <span class="content"></span>
  </span>
</p>

<p>
  <span>Text</span>

  <span class="box">
    <span class="content">content</span>
  <span class="icon">icon</span>
  </span>
</p>

<p>
  <span>Text</span>

  <span class="box">
    <span class="content">content</span>
  <span class="icon"></span>
  </span>
</p>

<p>
  <span>Text</span>

  <span class="box">
    <span class="content"></span>
  <span class="icon">icon</span>
  </span>
</p>

<p>
  <span>Text</span>

  <span class="box">
    <span class="content"></span>
  <span class="icon"></span>
  </span>
</p>



<p>
  <span>Text</span>

  <span class="box">
    <span class="icon">icon</span>
  <span class="content">content</span>
  </span>

  <span class="box">
    <span class="icon"></span>
  <span class="content">content</span>
  </span>

  <span class="box">
    <span class="icon">icon</span>
  <span class="content"></span>
  </span>

  <span class="box">
    <span class="content">content</span>
  <span class="icon">icon</span>
  </span>

  <span class="box">
    <span class="content">content</span>
  <span class="icon"></span>
  </span>

  <span class="box">
    <span class="content"></span>
  <span class="icon">icon</span>
  </span>

  <span class="box">
    <span class="content"></span>
  <span class="icon"></span>
  </span>
</p>

【问题讨论】：

标签： html css text alignment

【解决方案1】：

试试看。

CSS Flexbox - CSS flex-grow 属性：-

flex-grow 属性指定该项目相对于同一容器内的其他灵活项目将增长多少。

无论有没有文字，我们都可以得到相同的对齐方式。

.box {
  border: 1px solid black;
  display: inline-flex;
}

.icon {
  display: inline-block;
  padding: 20px;
  border-radius: 50%;
  background: gray; width:80px; height:80px;
}

.content {
  flex: 1;
  background: yellow;
  padding: 0 10px;
}

p{ display:flex;}
p > *{flex:1;}
p > span:first-child{flex-grow:inherit;}

<body>
<p> <span>Text</span> <span class="box"> <span class="icon">icon</span> <span class="content">content</span> </span> </p>
<p> <span>Text</span> <span class="box"> <span class="icon"></span> <span class="content">content</span> </span> </p>
<p> <span>Text</span> <span class="box"> <span class="icon">icon</span> <span class="content"></span> </span> </p>
<p> <span>Text</span> <span class="box"> <span class="content">content</span> <span class="icon">icon</span> </span> </p>
<p> <span>Text</span> <span class="box"> <span class="content">content</span> <span class="icon"></span> </span> </p>
<p> <span>Text</span> <span class="box"> <span class="content"></span> <span class="icon">icon</span> </span> </p>
<p> <span>Text</span> <span class="box"> <span class="content"></span> <span class="icon"></span> </span> </p>
<p> <span>Text</span> <span class="box"> <span class="icon">icon</span> <span class="content">content</span> </span> <span class="box"> <span class="icon"></span> <span class="content">content</span> </span> <span class="box"> <span class="icon">icon</span> <span class="content"></span> </span> <span class="box"> <span class="content">content</span> <span class="icon">icon</span> </span> <span class="box"> <span class="content">content</span> <span class="icon"></span> </span> <span class="box"> <span class="content"></span> <span class="icon">icon</span> </span> <span class="box"> <span class="content"></span> <span class="icon"></span> </span> </p>
</body>

【讨论】：

有什么办法可以只改变框或图标吗？

【解决方案2】：

首先，元素如何作为同级元素与内联元素对齐。第一个元素用于对齐基线。如果第一个元素不包含文本，则元素本身在基线上对齐。如果第一个元素包含文本，它将与该文本对齐。

我最近找到了一个解决方案。但这需要一个辅助元素 (.align)。

该元素必须是 Box 中第一个能够在同一基线上对齐的元素。

  <span class="box">
    <span class="content align"></span>
    <span class="icon">icon</span>
    <span class="content">content</span>
  </span>

它可以自己设置样式，也可以使用与对齐内容相同的类。该元素必须对用户不可见，并且也不应包含任何内容。内容设置为零宽度空间。没有内容对齐将不起作用。

.align {
  margin-left: 0;
  margin-right: 0;
  border-left: 0;
  border-right: 0;
  padding-left: 0;
  padding-right: 0;
  width: 0;
}
.align::before {
  content: "\200B";
}

如果不应该使用其他元素，也可以为框本身添加样式。

box:before 的样式应该与带有附加不可见部分的内容一样。

.content, .box::before {
  /* style like your content */
  ...
}

.box::before {
  margin-left: 0;
  margin-right: 0;
  border-left: 0;
  border-right: 0;
  padding-left: 0;
  padding-right: 0;
  width: 0;
  content: "\200B";
}

在特殊情况下可能需要更多样式来设置为零宽度。

溢出：隐藏似乎不起作用。如果溢出隐藏处于活动状态，则对齐将不再起作用。

【讨论】：