html - 破译网站布局

Question

作为我教育的一部分，我正在阅读以下网站的代码，并试图弄清楚它们是如何组合在一起的。

https://www.wwf.org.uk/

我的问题；在站点标题中，有一个“关注我们”社交媒体部分。如果您将这个元素作为一个整体来检查，它位于 <div> 中。标记为“社会上下文区域”类。

是什么造就了这个<div>元素水平位于页面中央？

该元素显示为行内 block ，没有填充、边框或边距。因此，我认为应该简单地坐在“成为 WWF 成员(member)”部分的旁边，两者之间不应有可见的空间。

HTML/CSS 的哪一部分在两个元素之间创建间距并导致社交媒体部分水平集中？

Answer 1

这一行使“关注我们”元素位于中心:

text-align: justify;

它位于名为 header_top_bar 的 div 中名为 content 的 div 中，如下图所示:

如果你删除它，那么元素看起来像这样: