Center an image vertically with CSS in HTML

Question

I want to center the image on the right vertically, so that it is centered between the two green titles, can somebody help me with this?

my CSS code:

.vorigejaren img {
        width: 25%;
        height: auto;
        float: right;
 }
 
.vorigejaren p {
    display: inline;
}

My HTML code:

<div class="vorigejaren">
<img src="../fotos/leden/Praesidium/Groepsfoto_2022_aangepast.jpg" alt="foto">
<p><?php echo $jaar['leden']; ?></p>
</div>

I tried looking it up on the internet, but noru-yhing seemed to work...

I know, but thanks I made a mistake when making the title, Thanks! — Wolle Van Poucke, Nov 05 '22 at 15:26
When using float (in dutch 'drijven') you cannot center vertically. — bron, Nov 05 '22 at 15:46
Have al look on flexbox https://stackoverflow.com/questions/25832340/css-flexbox-vertically-horizontally-center-image-without-explicitely-defining-pa — bron, Nov 05 '22 at 15:51

score 1 · Accepted Answer · answered Nov 05 '22 at 15:46

1

You can try this:



 .vorigejaren {
       display:flex;
      justify-content: center;
    }

img {
    margin:auto;}

answered Nov 05 '22 at 15:46

Aymen Missaoui

122
4

score 0 · Answer 2 · answered Nov 05 '22 at 16:07

Please use a flex box (flex-direction:row) to enclose two DIVs each of say 50% width so that the right hand side one can use align-self:center; to make itself vertically align

I have made two rows of the contents to show it.

Please click "Run code snippet" and then click "Full page" to see the effect

<div style="display:flex;flex-direction:row;">

<div style="width:50%;float:left;">
<ul>
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse    

</ul>
</div>

<div  style="width:50%;float:center;text-align:center;align-self:center;">
   <img src="https://i.stack.imgur.com/IGD9N.jpg" style="width:150px;">
</div>

</div>


<div style="display:flex;flex-direction:row;">

<div style="width:50%;float:left;">
<ul>
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse
<li>Vice-prases: Tibe VanHaudenhuyse    

</ul>
</div>

<div  style="width:50%;float:center;text-align:center;align-self:center;">
   <img src="https://i.stack.imgur.com/IGD9N.jpg"  style="width:150px;">
</div>

</div>

[![enter image description here][1]][1]

Center an image vertically with CSS in HTML

2 Answers2