在页脚中居中，左边是文本
在页脚中居中，左边是文本
提问于 2022-11-04 16:38:26
我试着做一个页脚，在中间有一个图像，在页脚的左边有一个段落。这就是我所拥有的：
正如你所看到的，当文字在左边的时候，图像不是中心的。
这是我的密码：
.copyright {
color: #b4b4b4;
float: left;
font-size: 15px;
margin-left: 10px;
}
footer {
background: #303030;
padding: 35px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: inline-block;
}<footer>
<p class="copyright">Aeron © 2022</p>
<a href="index.html"><img src="./images/logo.png" width="125px" title="Aeron Corporation" alt="logo" class="footer-logo"></a>
</footer>
我怎么才能解决这个问题？谢谢
回答 3
Stack Overflow用户
发布于 2022-11-04 16:45:09
尝试absolute定位
.copyright {
color: #b4b4b4;
float: left;
font-size: 15px;
margin-left: 10px;
}
footer {
position: relative;
background: #303030;
padding: 35px 0;
bottom: 0;
width: 100%;
height: auto;
display: inline-block;
}
footer a {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}<footer>
<p class="copyright">Aeron © 2022</p>
<a href="index.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Android_O_Preview_Logo.png/1024px-Android_O_Preview_Logo.png" width="125px" title="Aeron Corporation" alt="logo" class="footer-logo">
</a>
</footer>
Stack Overflow用户
发布于 2022-11-04 16:55:13
你可以使用显示挠曲！
.copyright {
color: #b4b4b4;
float: left;
font-size: 15px;
margin-left: 10px;
}
footer {
background: #303030;
padding: 35px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
p {
position: absolute;
left: 0;
}<footer>
<p class="copyright">Aeron © 2022</p>
<a href="index.html"><img src="./images/logo.png" width="125px" title="Aeron Corporation" alt="logo" class="footer-logo"></a>
</footer>
Stack Overflow用户
发布于 2022-11-04 17:16:56
我加了几个边框来显示什么地方。使用这个，我想你会发现，无论文本的大小或页面大小，它都会对图像进行居中，并将版权保留在左边；
为了清晰起见，我在注释中添加了详细的网格版本。
footer {
font-size: 16px;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(3 1fr);
align-items: center;
text-align: center;
height: 4rem;
border-color: pink;
background: #303030;
}
footer,
footer>* {
border: 2px solid;
}
.copyright {
text-align: left;
grid-area: 1 / 1 / 1 / 1;
border-color: lime;
color: #b4b4b4;
font-size: 2rem;
/* same as
grid-row-start: 1;
grid-row-end: 1;
grid-column-start: 1;
grid-column-end: 1;*/
}
.pretty-image {
grid-area: 1 / 1 / 1 / 3;
border-color: orange;
/* same as
grid-row-start: 1;
grid-row-end: 1;
grid-column-start: 1;
grid-column-end: 3;*/
}
.pretty-image>a>img {
height: 50px;
width: 50px;
}<footer>
<div class="copyright">Aeron © 2022</div>
<div class="pretty-image">
<a href="index.html"><img src="./images/logo.png" width="125px" title="Aeron Corporation" alt="logo" class="footer-logo"></a>
</div>
</footer>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74320285
复制相关文章
相似问题
腾讯云开发者
