解密网站布局

Question

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

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

我的问题;在网站标题内，有一个“关注我们”的社交媒体部分。如果您将此元素作为一个整体进行检查，它将位于<div>标记内，其类别为“social contextual-region”。

是什么让这个<div>元素水平放置在页面的中心？

元素显示为内联块，没有填充，边框或边距。因此，我认为应该只是简单地坐在“成为世界自然基金会成员”部分旁边，两者之间应该没有可见的空间。

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

Answer 1

这一行使“跟随我们”元素位于中心：

text-align: justify;

它位于名为header_top_bar的div内的div命名内容中，如下图所示：

如果删除它，则元素如下所示：

Answer 2

您询问的div的父级有css属性text-align: justify

Answer 3

使用暗示 text-align:justify ， display: inline-block 和生成内容组合的技术进行对齐让元素在水平上同等地分配。

生成内容的目的是强制换行，否则元素保持左对齐（或右对齐或居中对齐）。

因此，代码的重要部分是：

.header_top_bar .content {
    text-align: justify;
    ...
}

.header_top_bar .title, .header_top_bar .social, .header_top_bar .newsletter, .header_top_bar .search {
    display: inline-block;
    ...
}

和

.header_top_bar .content::after {
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 99%;
}

在 this link ，您可以找到有关此技术的说明。

我还简化了代码的简化版本

.wrapper{
    text-align: justify;
    padding: 10px;
    background: #333;
}
.wrapper::after {
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 99%;
}
.justified-element {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    font-size: 16px;
    color: #fff;
}

<div class="wrapper">
  <p class="justified-element">One</p>
  <span class="justified-element">Two</span>
  <div class="justified-element">Three</div>
  <p class="justified-element">Four</p>
</div>