CODEWITHSUNDEEP
htmlcss
Reginald1234
Reginald1234

Reputation: 335

Text Center inside box

I got a problem im trading to figure our for hours now and im going crazy.

I want the text next to the icon be in the middle of the box. But I cant figure out what i have done wrong, could you also critique my code Im learning.

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

My 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

Upvotes: 0

Views: 123

Answers (2)

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

A very SIMPLE SOLUTION, assign property of display:flex to class boximg

EDIT: Made some HTML changes look into it, and you will get better understanding of Flexbox.

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

Upvotes: 0

caiovisk
caiovisk

Reputation: 3809

You can use display:flex which is supported for the modern browsers. Also you will have to wrap your text then you will be able to play with it more easily.

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

Upvotes: 1

Related Questions