如何解决如何垂直对齐图像和文本?
所以我需要垂直居中图像和文本。但是,我的代码出了点问题,我不知道为什么。我可以让文本居中,但是,图像不是我不知道为什么。有任何想法吗? 到目前为止,这是我的代码。
.container {
height: 300px;
width: 300px;
position: relative;
border: 3px solid black;
background-color: transparent;
}
.center {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.settings {
width: 100px;
height: 100px;
}
.connecttext {
color: #000;
text-align: center;
}
<div class="container">
<div class="center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/1200px-How_to_use_icon.svg.png" class="settings">
<p class="connecttext"><strong>Connect</strong><br>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>
</div>
</div>
解决方法
将此添加到.center
:
.center {
display: flex;
place-items: center;
...
}
,
.center {
display: flex;
justify-content: center; //for horizontal
align-items: center; //for vertically align
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。