如何让我的标题元素正确排列成一行？答案

【问题标题】：How can I get my header elements to line up in a row properly?如何让我的标题元素正确排列成一行？
【发布时间】：2022-02-17 08:44:15
【问题描述】：

我为整个页面指定了背景图片。最重要的是，我想要一个带有纯色背景颜色的标题，左侧是我的徽标，中间是公司名称，右侧是我的名字。

在此下方，我想为我的网站的主页设置 3 列，如果可能的话，每列都可能有自己的背景颜色。

我正在尝试使用引导程序为我的标题提供三个部分（徽标-文本-名称），并且我希望文本居中。

我有这么多填充的原因是徽标一直挂在标题的底部。

现在我确信我做错了很多，但如果有人能提供帮助，我将永远感激不尽。谢谢。

body {
  background-image: url(images/bg.jpg);
}

header {
  background-color: #539e8a;
  padding: 20px 10px 30px 10px;
  color: #f6c5be;
  border-radius: 25px;
  margin-top: 10px;
  height: 180px;
}

#logo {
  width: 160px;
  height: 140px;
  float: left;
}

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <header>
    <div class="container">
      <div class="row">
        <div class="col-xs-2">
          <img id="logo" src="https://via.placeholder.com/160x140" alt="cakes 'n' bakes logo">
        </div>

        <div class="col-xs-8">
          <h1>Cakes 'n' Bakes</h1>
        </div>

        <div class="col-xs-2">
          <p>my name</p>
        </div>
      </div>
    </div>
  </header>

  <div class="container">
    <div id="main" class="row">
      <div id="col1" class="col-sm-4">
        <h2> col 1 </h2>
      </div>
      <div id="col2" class="col-sm-4">
        <h2> col 2 </h2>
      </div>
      <div id="col3" class="col-sm-4">
        <h2> col 3 </h2>
      </div>
    </div>
  </div>
</body>

【问题讨论】：

如您所见，我已经为您的代码创建了一个演示。请修改您的帖子以尝试简化，只针对您问题的关键方面。上面有很多不相关的东西。对问题要非常清楚，不要让我们感到沮丧。我们都理解和同情，但这在这里是一种干扰。我们不是讨论论坛。
Protip：浮动是一种过时的技术。它们在最新版本的 Bootstrap 中几乎不存在，您通常不应该使用它们。

标签： php html css twitter-bootstrap

【解决方案1】：

Bootstrap 5 确实将flexbox 带到了桌面上，所以我会使用它而不是与列搏斗，由于不灵活，这可能会很麻烦。

在这里，我用一个简单的 flex 行替换了您的容器、行和列。交叉轴上的项目对齐使事物居中。中心元素上有 Bootstrap 的 flex-fill 类以使其伸展。

另请注意，我已将您的自定义边距和填充替换为 Bootstrap spacing classes 收拾东西。

body {
  background-image: url(https://via.placeholder.com/1200);
}

header {
  background-color: #539e8a;
  color: #f6c5be;
  border-radius: 25px;
}

#logo {
  width: 160px;
  height: 140px;
}

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <header class="mt-3">
    <div class="d-flex align-items-center">
      <img id="logo" src="https://via.placeholder.com/160x140" alt="cakes 'n' bakes logo" class="logo m-3">

      <div class="flex-fill text-center">
        <h1>Cakes 'n' Bakes</h1>
      </div>

      <div class="px-3">
        <p>My Name</p>
      </div>
    </div>
  </header>

  <div class="container">
    <div id="main" class="row">
      <div id="col1" class="col-sm-4">
        <h2> col 1 </h2>
      </div>
      <div id="col2" class="col-sm-4">
        <h2> col 2 </h2>
      </div>
      <div id="col3" class="col-sm-4">
        <h2> col 3 </h2>
      </div>
    </div>
  </div>
</body>

【讨论】：

【解决方案2】：

我对您的代码进行了一些更改并添加了一些内容，希望对您有所帮助！

body {
  background-image: url(images/bg.jpg);
}

header {
  background-color: #539e8a;
  padding: 20px 10px 0px 0px;
  color: #f6c5be;
  border-radius: 25px;
  margin-top: 10px;
  height: 180px;
}

#logo {
  width: 160px;
  height: 140px;
}

#top-part-1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.col-xs-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.col-xs-8 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header-2 {
  padding: 20px 10px 0px 0px;
  color: #000000;
  border-radius: 25px;
  margin-top: 10px;
  height: 180px;
}

#top-part-2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<header>
  <div class="container" id="top-part-1">
    <div class="col-xs-2">
      <img id="logo" src="images/logo.png" alt="cakes 'n' bakes logo">
    </div>

    <div class="col-xs-8">
      <h1>Cakes 'n' Bakes</h1>
    </div>

    <div class="col-xs-2">
      <p>my name</p>
    </div>
  </div>
</header>

<div class="header-2">
  <div class="container" id="top-part-2">
    <div class="col-xs-2">
      <h2> col 1 </h2>
    </div>
    <div class="col-xs-8">
      <h2> col 2 </h2>
    </div>
    <div class="col-xs-2">
      <h2> col 3 </h2>
    </div>
  </div>
</div>

【讨论】：

顺便说一下我不使用Bootstrap所以你会发现Bootstrap代码被删除了！
是的，这是个问题。这是一个引导问题，您已经用一堆不必要的 CSS 替换了库的类。这不明智。
有什么建议可以让我的代码变得更好吗？因为好久没学完Html和CSS课程了
我给了你一些。使用库提供的类。您的代码没有任何问题，但不适用于此特定问题。