How to center text element

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=""></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

  <img src=" " alt=" ">
    Text goes here..
1 Like