Css 正在尝试居中。使用justify content:center跟随btn； 身体{ 字体系列：Arial，无衬线； } 页眉、页脚{ 显示器：flex； 弯曲方向：行； } 标题.配置文件缩略图{ 宽度：50px； 高度：50px； 边界半径：4px； } header.profile名称{ 显示器：flex； 弯曲方向：立柱； 证明内容：中心； 左边距：10px； } 标题。跟随btn{ 显示器：flex； 证明内容：中心； 保证金：0自动； } 标题。跟随btn按钮{ 边界：0； 边界半径：3px； 填充物：5px； } 收割台h3，收割台h4{ 显示器：flex； 保证金：0； } #内p{ 边缘底部：10px； 字体大小：20px； } #内部人力资源{ 利润率：20px0； 边框样式：实心； 不透明度：0.1； } 页脚统计{ 显示器：flex； 字体大小：15px； } 页脚。统计数据很强{ 字号：18px； } footer.stats.likes{ 左边距：10px； } 页脚{ 左边距：自动； } 页脚.cta按钮{ 边界：0； 背景：透明； } 昆西·拉森 @骨化 跟随

我遇到了很多人，他们都在寻找一个可以帮助他们聪明工作的技巧。即使你工作聪明，你也必须努力工作

2018年1月12日下午1:32

---

107转发 431喜欢 分享 转发 喜欢

---

所以我的问题是，在我添加内容之前：中心；到页眉。按照btn，按钮保持在左边，如果我添加了任何类型的数据，它会转到右边。我是用中心还是别的什么。我的问题是为什么？。我正在尝试学习基础知识，考虑到我刚完成课程，说明了资源中心应该将其推到x轴的中间，但事实并非如此，这有点让人困惑。

您有：

边距：0自动进入
标题。按照btn
操作，按钮将向右对齐，因为无论标题设置为
显示：flex，它都会在左侧添加一个完整的边距

使边距类似：
边距：自动0如果要水平对齐



身体{
字体系列：Arial，无衬线；
}
页眉、页脚{
显示器：flex；
弯曲方向：行；
}
标题.配置文件缩略图{
宽度：50px；
高度：50px；
边界半径：4px；
}
header.profile名称{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
左边距：10px；
}
标题。跟随btn{
显示器：flex；
证明内容：中心；
保证金：自动0；
左侧填充：10px；
}
标题。跟随btn按钮{
边界：0；
边界半径：3px；
填充物：5px；
}
收割台h3，收割台h4{
显示器：flex；
保证金：0；
}
#内p{
边缘底部：10px；
字体大小：20px；
}
#内部人力资源{
利润率：20px0；
边框样式：实心；
不透明度：0.1；
}
页脚统计{
显示器：flex；
字体大小：15px；
}
页脚。统计数据很强{
字号：18px；
}
footer.stats.likes{
左边距：10px；
}
页脚{
左边距：自动；
}
页脚.cta按钮{
边界：0；
背景：透明；
}
昆西·拉森
@骨化
跟随
我遇到了很多人，他们都在寻找一个可以帮助他们聪明工作的技巧。即使你工作聪明，你也必须努力工作

2018年1月12日下午1:32

107转发
431喜欢
分享
转发
喜欢

<style>
  body {
    font-family: Arial, sans-serif;
  }
  header, footer {
    display: flex;
    flex-direction: row;
  }
  header .profile-thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 4px;
  }
  header .profile-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
  }
  header .follow-btn {
    display: flex;
justify-content:center;
    margin: 0 0 0 auto;
  }
  header .follow-btn button {
    border: 0;
    border-radius: 3px;
    padding: 5px;
  }
  header h3, header h4 {
    display: flex;
    margin: 0;
  }
  #inner p {
    margin-bottom: 10px;
    font-size: 20px;
  }
  #inner hr {
    margin: 20px 0;
    border-style: solid;
    opacity: 0.1;
  }
  footer .stats {
    display: flex;
    font-size: 15px;
  }
  footer .stats strong {
    font-size: 18px;
  }
  footer .stats .likes {
    margin-left: 10px;
  }
  footer .cta {
    margin-left: auto;
  }
  footer .cta button {
    border: 0;
    background: transparent;
  }
</style>
<header>
  <img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
  <div class="profile-name">
    <h3>Quincy Larson</h3>
    <h4>@ossia</h4>
  </div>
  <div class="follow-btn">
    <button>Follow</button>
  </div>
</header>
<div id="inner">
  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
  <span class="date">1:32 PM - 12 Jan 2018</span>
  <hr>
</div>
<footer>
  <div class="stats">
    <div class="Retweets">
      <strong>107</strong> Retweets
    </div>
    <div class="likes">
      <strong>431</strong> Likes
    </div>
  </div>
  <div class="cta">
    <button class="share-btn">Share</button>
    <button class="retweet-btn">Retweet</button>
    <button class="like-btn">Like</button>
  </div>
</footer>