如何使用CSS实现文字在Logo正下方对齐

你目前的代码里Logo容器和副标题容器是两个独立的同级元素，布局上下文分离，很难直接对齐，将二者合并到同一个父容器后用flex布局即可快速实现对齐效果，操作步骤如下：

你当前的网站效果如下：

步骤1：修改HTML结构 #

把副标题容器挪到Logo容器内部：

<!--logo区域-->
<div class="logo">
  <img class="img" src="photos/logo1.png" alt="网站logo">
  <div class="textbox">
    <p class="subtext"> We care about you </p>
  </div>
</div>

步骤2：添加CSS样式 #

给Logo容器设置flex布局，控制内部元素对齐规则：

.logo {
  display: flex;
  flex-direction: column;
  /* 水平居中对齐，需左对齐改为flex-start，右对齐改为flex-end */
  align-items: center;
}

/* 按需调整副标题样式 */
.subtext {
  /* 副标题与Logo的顶部间距，可自行修改数值 */
  margin: 8px 0 0 0;
  font-size: 14px;
}

无需额外做复杂的定位操作，按照上述代码修改即可实现Logo和副标题的对齐效果。

内容的提问来源于stack exchange，提问作者monie