时间戳

首页 > 解决方案 > 将文本和图像堆叠在一起

html - 将文本和图像堆叠在一起

问题描述

我似乎无法将我的文字放在这三个徽标/图标之上。我也希望他们居中。我已经尝试过内联块，居中文本，但我可能做的太多了？

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;
}

标签： htmlcss

解决方案

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

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

添加text-align: center到.sociallogo.

.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>

推荐阅读