HTML/CSS-如何以不同的方式将三个不同的元素以令人兴奋的方式对齐

我已经研究这个问题好几天了，到目前为止还没有找到解决办法。如果这只是一个初学者的问题，有很多答案，我道歉，请告诉我正确的方向

我正试图开发一个“标题”或“横幅”显示在我的网站顶部

我有一个彩色的盒子，在里面我想显示一个图像（左边有一点），在它旁边有一些文本（网站的名字），然后再集中在框的中间，一些非常短的文本（文档的名字，家，联系，类似的东西）。 所以它应该是这样的：

到目前为止，无论我尝试了什么，我都得到了以下结论：

我目前正在使用一个div元素作为包含三个不同元素的框，这样我就可以在样式表中分别设置它们的格式。主要问题似乎是，最后一个标题（居中文本）只是围绕文本创建的，直到框的右边缘。因此，左对齐、右对齐或居中对齐没有任何区别

<div class="box blue-box ">
  <img class="icon" src="file://C:/Users/jafa/Desktop/juggling/website/images/white_design.png" alt="icon">
  <h8 class="white-text-header">Website name </h8>
  <h9 class="white-text-main-header"> Centered Text</h9>
</div>

网站名称
居中文本

使用css样式表：

<style>

  .blue-box {
    background-color:  #401841;
    padding: 10px;
    border:1px solid white;
    border-radius: 4px;

  .white-text-header {
    font-family: Arial;
    color: white;
    font-size: 24;
    vertical-align: middle;
    text-align: left;
  }

  .white-text-header {
    font-family: Arial;
    color: white;
    font-size: 24;
    vertical-align: middle;
    text-align: center;
  }


  img.icon{
    width: 120px;
    height: auto;
    align-items: left;
  }
</style>

.蓝盒子{
背景色：#401841；
填充：10px；
边框：1px纯白；
边界半径：4px；
.白色文本标题{
字体系列：Arial；
颜色：白色；
字号：24；
垂直对齐：中间对齐；
文本对齐：左对齐；
}
.白色文本标题{
字体系列：Arial；
颜色：白色；
字号：24；
垂直对齐：中间对齐；
文本对齐：居中；
}
img.icon{
宽度：120px；
高度：自动；
对齐项目：左；
}

如果有人知道更好的解决方案，我将不胜感激。感谢您花时间帮助我。

您复制了“白色文本标题”类定义。此外，省略了“蓝色方框”类的右括号。代码应按以下方式编写

<style>
 .blue-box {
    background-color:  #401841;
    padding: 10px;
    border:1px solid white;
    border-radius: 4px;
 }

 .white-text-header {
    font-family: Arial;
    color: white;
    font-size: 24;
    vertical-align: middle;
    text-align: left;
 }

 .white-text-main-header {
    font-family: Arial;
    color: white;
    font-size: 24;
    vertical-align: middle;
    text-align: center;
 }


 img.icon {
     width: 120px;
     height: auto;
     align-items: left;
 }
 </style>

.蓝盒子{
背景色：#401841；
填充：10px；
边框：1px纯白；
边界半径：4px；
}
.白色文本标题{
字体系列：Arial；
颜色：白色；
字号：24；
垂直对齐：中间对齐；
文本对齐：左对齐；
}
.白色文本主标题{
字体系列：Arial；
颜色：白色；
字号：24；
垂直对齐：中间对齐；
文本对齐：居中；
}
img.icon{
宽度：120px；
高度：自动；
对齐项目：左；
}

h8和h9可能不是您想要使用的元素。更新它们，您将得到您想要的。您需要更新您的css类。您有一些错误的语法和重复的名称

.blue-box {
  background-color:  #401841;
  padding: 10px;
  border:1px solid white;
  border-radius: 4px;
}

.white-text-header {
  font-family: Arial;
  color: white;
  font-size: 24;
  vertical-align: middle;
  text-align: left;
}

.white-text-main-header {
  font-family: Arial;
  color: white;
  font-size: 24;
  display: inline-block;
  text-align: center;
}

img.icon {
  width: 120px;
  height: auto;
  align-items: left;
}

这把小提琴更接近你想要的：

• h8和h9不是标准标题标签
• 通过将规则添加到父项（

  font-family

  、

  font-size

  和

  color

  ），可以重用文本样式属性

• font size

  需要一个单位--

  24px

您可以使用Flexbox创建布局

正文{
保证金：0；
}
.蓝盒子{
背景色：#401841；
填充：10px；
边框：1px纯白；
边界半径：4px；
字体系列：Arial；
字体大小：24px；
颜色：白色；
显示器：flex；
对齐项目：居中；
}
.蓝盒img{
/*在图像左侧添加空间*/
左边距：20px；
}
.白色文本主标题{
保证金：自动；
}

网站名称
居中文本

您需要为所有项目指定宽度Look in flexbox（）这对于这些类型的布局很有用，或者，正如下面所建议的，有许多css框架可以帮助完成这类工作。顺便说一下，

和

不是有效的HTML标记。

是可用的最小标题大小。如果您需要自定义内容，我建议使用带有custo的

标记m类类似于

你好！

@Josh Bradley我认为它们在技术上是有效的，因为HTML5可以让你创建任何你想要的元素。

或

没有语义或seovalue@sol好的观点。我应该说它们不是官方HTML5规范的一部分，因此如果可能的话，应该用更有意义的东西来代替e、 但是它们在技术上是有效的HTML。您好，非常感谢您的回答！很抱歉，语法和复制错误只是在我试图通过stackoverflow接口相应地格式化代码并将其减少到我想要发布的代码选择时发生的。这正是我到目前为止的下一个（也是最后一个）问题步骤是使最后一个元素在容器中水平居中。我想我会按照sol的建议试用Flexbox，看看是否可以使用。您好，谢谢您的回答。很抱歉，我在尝试格式化stackoverflow代码时犯了这些错误：）您好，谢谢您的评论。很抱歉，我在格式化stackoverflow的代码时犯了格式错误。不过，我还有一些其他问题：对于我来说，为字体大小添加px没有什么区别（有和没有）我还应该添加px吗？如果是，原因是什么？我想添加两种不同的格式，以便能够分别为这两个元素设置样式。如果我将样式元素添加到父元素中，我是否仍然可以分别覆盖每个元素的样式元素？再次感谢您的帮助，Flexbox看起来很棒，我很快就会尝试：）您肯定可以如果没有影响，

字体大小

，则在其他地方正确设置了

字体大小

。下面是一个使用-->的示例，如果需要，可以将样式分开，我将它们添加到父级的唯一原因是因为它们是相同的，我只是减少了重复。