CODEWITHSUNDEEP
htmlcss
Robert9376
Robert9376

Reputation: 13

Center text under a image/icon within a div

Trying to get some text to center under a image, but so far have been unable to do so. Tried looking up some other similar questions here but to no avail. The image and the text I am trying to center are within the same div, so both the image and the text uses the same text-align property. This div simply creates a css circle object around the image and text.

Already tried placing my text into a span, into the same element hoping the text would automatically go to the bottom if there was not enough room to fit the text into the css generated circle, etc...

.menu {
  display: inline-block;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  margin-right: 20px;
  font-size: 20px;
  color: #000000;
  border: 4px double #000000;
  line-height: 250px;
  text-align: center;
  text-decoration: none;
  background: #ffffff;
}

.menu:hover {
  color: #ccc;
  text-decoration: none;
  background: #181547
}

.menu img {
  width: 150px;
  height: 150px;
}
<div class="wrapper">
  {{ content }}
  <div>
    <a href="" class="menu"><img src="/assets/img/About_icon.jpg"></a><span>About</span>
    <a href="" class="menu"><img src=""></a><span>Brands</span>
    <a href="" class="menu"><img src=""></a><span>DMS</span>
  </div>
</div>

In the end, I just want there to be a circle (already there) with an image and text inside which is centered with the text underneath the image, or even have the text outside of the circle and just underneath the circle instead.

Upvotes: 1

Views: 932

Answers (3)

sagar barvaliya
sagar barvaliya

Reputation: 72

.menu{
  display:inline-block;
  width:250px;
  height:250px;
  border-radius:50%;
  margin-right: 20px;
  font-size:20px;
  color:#000000;
  border: 4px double #000000;
  line-height:250px;
  text-align:center;
  text-decoration:none;
  background:#ffffff;
}

  .menu:hover{
    color:#ccc;
    text-decoration:none;
    background:#181547
  }

  .menu img {
    width: 150px;
    height: 150px;
  }
  .test{
    width: fit-content;
  }
  .text-center{
    text-align: center;
  }
<div class="wrapper" style="text-align: -webkit-center;">
  {{ content }}
  <span  style="display: flex; width: fit-content;">
    <div class="test">
      <a href="" class="menu"><img src="/assets/img/About_icon.jpg"></a><div class="text-center">About</div>
    </div>
    
    <div class="test"><a href="" class="menu">Insert Image</a><div class="text-center">Brands</div></div>
    <div class="test"><a href="" class="menu">Insert Image</a><div class="text-center">DMS</div></div>
    
  </span>
</div>

.menu{
  display:inline-block;
  width:250px;
  height:250px;
  border-radius:50%;
  margin-right: 20px;
  font-size:20px;
  color:#000000;
  border: 4px double #000000;
  line-height:250px;
  text-align:center;
  text-decoration:none;
  background:#ffffff;
}

  .menu:hover{
    color:#ccc;
    text-decoration:none;
    background:#181547
  }

  .menu img {
    width: 150px;
    height: 150px;
  }
  .test{
    width: fit-content;
  }
  .text-center{
    text-align: center;
  }
<div class="wrapper">
  {{ content }}
  <div  style="display: flex;">
    <div class="test">
      <a href="" class="menu"><img src="/assets/img/About_icon.jpg"></a><div class="text-center">About</div>
    </div>
    
    <div class="test"><a href="" class="menu">Insert Image</a><div class="text-center">Brands</div></div>
    <div class="test"><a href="" class="menu">Insert Image</a><div class="text-center">DMS</div></div>
    
  </div>
</div>

<div class="wrapper">
          {{ content }}
          <div  style="display: flex;">
            <div class="test">
              <a href="" class="menu"><img src="/assets/img/About_icon.jpg"></a><div class="text-center">About</div>
            </div>

            <div class="test"><a href="" class="menu">Insert Image</a><div class="text-center">Brands</div></div>
            <div class="test"><a href="" class="menu">Insert Image</a><div class="text-center">DMS</div></div>

          </div>
        </div>

Upvotes: 1

Austin_K
Austin_K

Reputation: 58

Try

a { 
  margin:auto;
  text-align:center;
}

One of those should center everything.

Also try using 

.menu {
  Text-align:center;
}

Upvotes: 0

Mohamed Abdallah
Mohamed Abdallah

Reputation: 996

You need to put the img and span under the same element and removing the line-height then you have to options.

Using margin

You can give the img display: block and margin: auto styles and text-align-center for the parent that has both img and span

Using flexbox

Giving the parent display: flex style and justify-content: center, align-items: center and 'flex-direction: column` will give you the result you want

Check the snippet

.menu {
  display: inline-block;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  margin-right: 20px;
  font-size: 20px;
  color: #000000;
  border: 4px double #000000;
  text-align: center;
  text-decoration: none;
  background: #ffffff;
}

.menu:hover {
  color: #ccc;
  text-decoration: none;
  background: #181547
}

.menu img {
  width: 150px;
  height: 150px;  
}


/* Edit */

/* ====== Without flex ====== */  
/*.wrapper div {
  text-align: center;
}

.wrapper img{
  display: block;
  margin: auto;
}
*/

/* ====== With flex ====== */  
.menu{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
<div class="wrapper">
  {{ content }}
  <div>
    <a href="" class="menu"><img src="https://via.placeholder.com/150/150"><span>About</span></a>
    <a href="" class="menu"><img src="https://via.placeholder.com/150/150"><span>Brands</span></a>
    <a href="" class="menu"><img src="https://via.placeholder.com/150/150"><span>DMS</span></a>
  </div>
</div>

Upvotes: 0

Related Questions