将文本和图片叠放在一起

Question

我似乎无法将文本放在这三个标志/图标之上。我也想让它们居中。我尝试过使用inline-block，居中文本，但可能有些过度了？

HTML：

    <div class= "sign-up">
        <a>Or Sign Up Using</a>
    </div>

    <div class= "sociallogo">
        <div class="socialcontainer">
            <img src="img/facebook.png">
        </div>
        <div class="socialcontainer">
            <img src="img/twitter.png">
        </div>
        <div class="socialcontainer">
            <img src="img/google.png">
        </div>
    </div>

CSS：

.sign-up {
    line-height: 1.5;
    color: #777777;
    text-align: center;
    display: inline-block;
    float: left;
}

.sociallogo {
    border-radius: 50%;
    margin: 5px;
    display: inline-block;
    clear: both;
}

.socialcontainer {
    display: inline-block;
    height: 50px;
    width: 50px;
    padding: 2px;
}

- bubblegum

---

编辑：抱歉，我误解了你的问题。 - Frizzant

@JerryD，你的编辑真是太糟糕了，只是让情况变得更糟。你把代码片段改成了代码块，并添加了一个图片的外部链接。我投票反对。 - Mark Baijens

请勿添加类似于“已解决”等内容到标题或正文中，这里的方式是选择最好地帮助了你的答案。 - Asons

是的，@LGSon是正确的。这将有助于任何未来访问该问题的人。只需找到答案，在赞成/反对按钮旁边有一个勾选标记可接受。 - Jerry D

谢谢大家！这是我第一次使用它，所以我不知道。 - bubblegum

Answer 1

使 .sign-up 和 .sociallogo 变成 block 而不是 inline-block。

从 .sign-up 中删除 float: left。

在 .sociallogo 中添加 text-align: center。

.sign-up {
  line-height: 1.5;
  color: #777777;
  text-align: center;
}

.sociallogo {
  border-radius: 50%;
  margin: 5px;
  text-align: center;
}

.socialcontainer {
  display: inline-block;
  height: 50px;
  width: 50px;
  padding: 2px;
}

<div class="sign-up">
  <a>Or Sign Up Using</a>
</div>

<div class="sociallogo">
  <div class="socialcontainer">
    <img src="img/facebook.png">
  </div>
  <div class="socialcontainer">
    <img src="img/twitter.png">
  </div>
  <div class="socialcontainer">
    <img src="img/google.png">
  </div>
</div>

- Turnip

Answer 2

我非常喜欢使用display: flex来处理这种事情，它对于定位非常有用，而且我认为你会发现它非常容易使用。

你应该在容器上使用display: flex和flex-direction（可以是row或column），但我认为你想要堆叠列，因此应该选择column。

添加align-items: center将使所有内容水平居中。

我已经为您简化了下面的代码：

.sign-up {
  line-height: 1.5;
  color: #777777;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sociallogo img {
  border-radius: 50%;
  margin: 5px;
  height: 50px;
  width: 50px;
  padding: 2px;
}

<div class="sign-up">
  <a>Or Sign Up Using</a>
  <div class="sociallogo">
    <img src="img/facebook.png">
    <img src="img/twitter.png">
    <img src="img/google.png">
  </div>
</div>

- coops

Answer 3

我将 sociallogo 的 display 属性改为 block，并更改了类的 text-align 属性以获得以下结果：

 <div class= "sign-up">
        <a>Or Sign Up Using</a>
    </div>

    <div class= "sociallogo">
        <div class="socialcontainer">
            <img src="img/facebook.png">
        </div>
        <div class="socialcontainer">
            <img src="img/twitter.png">
        </div>
        <div class="socialcontainer">
            <img src="img/google.png">
        </div>
    </div>
<style>
.sign-up {
    line-height: 1.5;
    color: #777777;
    text-align: left;
    display: inline-block;
    width: 100%;
}

.sociallogo {
    text-align: center
    border-radius: 50%;
    margin: 5px;
    display: block;
    clear: both;
    width: 100%;
}

.socialcontainer {
    text-align: center;
    display: inline;
    height: 50px;
    width: 50px;
    padding: 2px;
    width: 100%;
}
</style>

- Jerry D

Answer 4

尝试在两个容器上使用width: 100%，这应该可以解决问题。

之后您可以使用Transform和margin来居中图片。

.sign-up {
  width: 100%;
  line-height: 1.5;
  color: #777777;
  text-align: center;
  display: inline-block;
  float: left;
}

.sociallogo {
  width: 100%;
  border-radius: 50%;
  margin: 5px;
  display: inline-block;
  clear: both;
}

.socialcontainer {
  display: inline-block;
  height: 50px;
  width: 50px;
  padding: 2px;
}

<div class="sign-up">
  <a>Or Sign Up Using</a>
</div>

<div class="sociallogo">
  <div class="socialcontainer">
    <img src="img/facebook.png">
  </div>
  <div class="socialcontainer">
    <img src="img/twitter.png">
  </div>
  <div class="socialcontainer">
    <img src="img/google.png">
  </div>
</div>

- StPronk

Answer 5

试试这个：

从 `.sign-up` 中删除 `float: left;`

并将 `vertical-align: middle;` 添加到两个 `div`，即 `.sign-up` 和 `.sociallogo`。

- Dileep Meruvala