Hello,
I am working on product landing page and have issue with the list of features. I have made it as a list, where the listed objects are images with some text. My problem is that I want the text to be centred in the middle of the image, while also keeping it responsive.
Here is my codepen of the problem. I wanted to use dispaly:flex, but it doesn’t seem to work.
Hey there @Patryk,
Have you tried using flexbox for the li element?
If you use display: flex; on the list element
then use align-items:center; to align all the items inside the list element to the center of the element
By using this strategy, this is my output:
Hello patryk, you will need to place your image text in a div if you want to use flex on it
<li class="plain_list a"><img class="feautures_img" src="https://img.icons8.com/ios/344/organic-food.png"></li>
<div class = "titles">Only BIO certified ingredients</div>
this works just fine for your code
This solution works, but I am not sure if it is good for accessibility. Won’t the div put the text outside the list for screen readers?
I think you can get around this by adding an alt attribute containing the image title to the image .
A possible alternative to the div is to use a figure caption instead
<figure>
<img src=" " alt=" ">
<br>
<figcaption>
Text goes here..
</figcaption>
</figure>
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.