I am trying to make team profiles for the website, what I want is it to 3 profiles to display horizontally evenly.
<div>
<span>
<img>
<span></span>
</span>
<span>
<img>
<span></span>
</span>
<span>
<img>
<span></span>
</span>
</div>
right now output is:
<img><span><img><span><img><span>
output expected:
<img> <img> <img>
<span> <span> <span>
You could use flex or grid. Something like this:
div {
display: flex;
justify-content: space-evenly;
}
div > span > * { //this is to move the spans below the imgs
display: block;
}
You can put every profile in an inline div and make span a block element, like
img{width:70px;} span{display:block} .inline{display:inline-block;}
<div> <div class="inline"> <span> <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png"> <span>User</span> </span> </div> <div class="inline"> <span> <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png"> <span>User</span> </span> </div> <div class="inline"> <span> <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png"> <span>User</span> </span> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.