html - 框内文本中心

Question

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

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

我的 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

Answer 1

您可以使用现代浏览器支持的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>