gpt4 book ai didi

html - 框内文本中心

转载 作者:太空宇宙 更新时间:2023-11-04 07:38:51 25 4
gpt4 key购买 nike

我有一个问题,我现在花了几个小时交易来计算我们的数字,我快要疯了。

我希望图标旁边的文本位于框的中间。但是我不知道我做错了什么,你能不能也批评一下我正在学习的代码。

我的 CSS

#newaltcoins .boximg {
background-color: #cccccc;
width: 50px;
height: 50px;

}

#newaltcoins .box{
float:left;
border:#cccccc solid 1px;
color: black;
width: 200px;
height: 50px;
margin: 5px;
background-color: #EEEEEE;
white-space:nowrap;
text-align: center;

我的html

        <a href="http://google.com">
<div class="box">
<div class="boximg" >
<img src="./alt/alt_logo/etherieum.png">
<br>Etherieum
</div>
</div>
</a>

example

最佳答案

您可以使用现代浏览器支持的display:flex。此外,您还必须将文本换行,这样您才能更轻松地使用它。

#newaltcoins .boximg {
display: flex;
align-items: center;
}

#newaltcoins .boximg span{
display: block;
width: 100%;
}
#newaltcoins .boximg img {
width: 50px;
height: 50px;
background-color: #cccccc;
}

#newaltcoins .box{
float:left;
border:#cccccc solid 1px;
color: black;
width: 200px;
height: 50px;
margin: 5px;
background-color: #EEEEEE;
white-space:nowrap;
text-align: center;
}
<a href="http://google.com" id="newaltcoins">
<div class="box">
<div class="boximg" >
<img src="https://www.ethereum.org/images/logos/ETHEREUM-ICON_Black_small.png">
<span>Etherieum</span>
</div>
</div>
</a>

关于html - 框内文本中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48696974/

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