Question 41822 in PHP Question posted in
Official manual can be found here.

Center an image vertically with CSS in HTML – PHP

enter image description here

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…

Tags:

2

Answers


  1. 0 
    You can try this:



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

img {
    margin:auto;}
    Login or Signup to reply.
  2. 0

    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]

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search