how can I put pictures in the center | HTML, CSS

Question

 <span style="text-align: center;">
        <a href="https://www.reddit.com/r/cat/comments/lzr58y/funny_boy/">
            <img src="https://i.redd.it/3vjzzg8e3ml61.jpg" alt="https://www.reddit.com/r/cat/comments/lzr58y/funny_boy/" width="640" height="910">
        </a>
    </span>
    <!--how can I center pictures ? -->

This is the code I made it and I want to make this picture to go in the center. I tried to do it with text-align: center; and it won't go to center. well, I know text-align is for "text", so is their anything for pictures?

Answer 1

You have a few options:

1. Of which is to use margins and manually position it

2. Manually do it with position: relative or position: absolute

3. You can use auto as in margin: auto to achieve centering without manually doing it.

There are other options, but these are some that might help

Answer 2

 div { width: 300px; margin: 0 auto; } div img { width: 300px; height: 300px; }

Try changing the span element with div element and remove the sizes in your img element (width,height) and control it from your css + add the css to your code

Answer 3

The text-align:center actually works on images. but the element must have the display:block property to get elements to it's center.

<span> element doesn't have the display:block , so you can just add it.

Here's a working example:

 <span style="text-align: center;display:block"> <a href="https://www.reddit.com/r/cat/comments/lzr58y/funny_boy/"> <img src="https://i.redd.it/3vjzzg8e3ml61.jpg" alt="https://www.reddit.com/r/cat/comments/lzr58y/funny_boy/" width="340" > </a> </span>

You can also use <div> instead of <span> which have the display:block; property by default

Answer 4

span{
  display:grid;
  place-items: center;
}

Use this to put anything both horizontally and vertically center

Answer 5

 <span style="text-align: center;position: absolute;"> <a href="https://www.reddit.com/r/cat/comments/lzr58y/funny_boy/"> <img src="https://i.redd.it/3vjzzg8e3ml61.jpg" alt="https://www.reddit.com/r/cat/comments/lzr58y/funny_boy/" width="640" height="910" style=" position: relative; left: 50%; "> </a> </span>

You can give position and based on position set left:50%