How to center text element

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:
image

2 Likes

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>
1 Like