HTML对齐项目和字体颜色答案

【问题标题】：HTML align items and font colorHTML对齐项目和字体颜色
【发布时间】：2017-06-11 19:02:03
【问题描述】：

<!DOCTYPE html>
<html>
<head>
<style>
div.div1  {
    align-items: center;
    border-style: solid;
    border: 1px solid red;
    display: flex;
}
</style>
</head>
<body>

<div class="div1">
    <img src="smiley.gif">
    One<br>Two<br>Three<br><font color="red">Four</font>
</div>

</body>
</html>

我使用上面的代码来显示图像和旁边的文本One, Two, Three, Four。我正在尝试使Four 具有红色，但它将它与其他数字分开放置在左侧。我该如何解决这个问题？

【问题讨论】：

<font> 标签doesn't exist anymore。
@j08691 但确实如此，这就是问题所在。如果浏览器有任何意义，他们就会使这样的代码无效。但是不，他们继续支持所有这些旧东西。
@MrLister 我知道，我知道...
@MrLister 不，它没有：developers.whatwg.org/obsolete.html#obsolete 但我认为你的意思只是浏览器仍然支持它。也就是说，他们明天可以在不通知的情况下放弃对它的支持，如果它破坏了任何人的网页，那不是任何人的错，而是决定使用<font> 的网络开发人员。浏览器也支持<marquee>，但这从未成为任何 HTML 规范的一部分。
@JaredFarrish 不。我说如果他们的分页符导致他们使用<font> 并且浏览器停止支持它，他们有一天会这样做。

标签： html css flexbox display

【解决方案1】：

首先，我建议不要使用带有内联 CSS 的 font 元素，因为 font element 现在已过时，而是使用带有红色类的 span，然后您可以使用 CSS 设置样式。

第二次将所有文本包裹在 div 中将使它们保持对齐。

示例：

div.div1 {
  align-items: center;
  border-style: solid;
  border: 1px solid red;
  display: flex;
}

.red {
  color: red;
}

<div class="div1">
  <img src="https://www.w3schools.com/tags/smiley.gif">
  <div>
    One
    <br> 
    Two
    <br> 
    Three
    <br>
    <span class="red">Four</span>
  </div>
</div>

希望这会有所帮助！

【讨论】：

使用font 的用户现在不为什么不使用，所以加上你的建议会很棒
谢谢，我现在应该编辑帖子以添加此内容。

【解决方案2】：

只需像这样将整个语句包装在另一个标签中：

    <p>One<br>Two<br>Three<br><span style="color:red">Four</span></p>

顺便说一句 - 我反对样式属性以支持正确的 css 文件，但只是为了演示......

发生这种情况是因为当您在样式中使用 flex 时，容器的每个流入子项都变为 flex item，并且直接包含在 flex 容器中的每个连续文本运行都包装在匿名 flex 项中。

【讨论】：

此works，但请删除font 标记以支持span 或一些有效替代方案。