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。此外，您必须包装文本，然后您将能够更轻松地使用它。

＆＃13;

#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;
   }

＆＃13;

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

＆＃13;

Answer 2

一个非常简单的解决方案，将display:flex的属性分配给班级boximg

编辑：对其进行了一些HTML更改，您将更好地了解Flexbox。

＆＃13;

.box {
  display: flex;
  border: #cccccc solid 1px;
  color: black;
  width: 200px;
  margin: 5px;
  background-color: #EEEEEE;
}

.boximg {
  flex: 1;
  background-color: black;
}

.boximg img {
  width: 100%;
  height: auto;
  margin: auto 0px;
  vertical-align: middle;
}

.text {
  flex: 3;
}

.text p {
  text-align: center;
}

＆＃13;

<a href="http://google.com">
  <div class="box">
    <div class="boximg">
      <img src="https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300" style="width:100%">
    </div>
    <div class="text">
      <p>Etherieum</p>
    </div>
  </div>
</a>

＆＃13;

文本中心框内

2 个答案: