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.
.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>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments