我似乎无法将这些文字放在这三个徽标/图标之上。我希望他们也能集中在一起。我试过内联块,居中文本,但我可能只是做得太多了?
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;
}
我将display
的sociallogo
更改为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>
制作.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>
我非常喜欢使用display: flex
来做这种事情,对定位非常有用,我觉得你会觉得它很容易使用。
你应该在容器上使用display: flex
和flex-direction
(可以是row
或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>
尝试在两个容器上使用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>
试试这个:
从float: left;
中删除.sign-up
并将vertical-align: middle;
添加到.sign-up
和.sociallogo
div