gpt4 book ai didi

html - 文本未居中对齐

转载 作者:太空宇宙 更新时间:2023-11-04 13:37:27 24 4
gpt4 key购买 nike

<分区>

我想重新创建这样的东西:

from Telegram

然后我会将它用于社交媒体和外部网站 :) 这就是我能想到的:

from my own Website

如你所见,这里有两个问题:

  1. 图片不适合 div。
  2. 文本不在中间。

我想如果我可以将文本居中对齐,图片也会自动对齐,但我似乎做不到。

这是我写的代码:

.child {
height: 250px;
margin: 20px;
}

.external-links {
display: table-cell;
background: #ccc;
vertical-align: middle;
text-align: center;
border-radius: 32px;
color: black;
text-decoration: none;
padding: 1px;
}
<div class="child">
<a class="external-links" href="https://github.com/amirashabani" target="_blank">
<img src="{% static 'app/images/icons/github.ico' %}">
<span>github</span>
</a>
<a class="external-links" href="https://twitter.com/amirashabani" target="_blank">
<img src="{% static 'app/images/icons/twitter.ico' %}">
<span>twitter</span>
</a>
<a class="external-links" href="https://stackoverflow.com/users/6282576/amir-a-shabani" target="_blank">
<img src="{% static 'app/images/icons/stackoverflow.ico' %}">
<span>stackoverflow</span>
</a>
</div>

我以为两行 vertical-align: middle; & text-align: center; 会使文本居中,但事实并非如此。

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com