How to align just in the middle images?

1

Hello, I have set up some icons on my website but there is one (the “zoom” icon) that is not aligned. It is on the top of the container. I had to use justify content with the space-evenly option to order all the images. I have tried everything but I can not figure out. It must be a silly question for the experts but this is my first website. I am attaching the images as evidence.

citastwo
citastwo870×293 52.6 KB
citasone
citasone375×631 45.6 KB

Thanks in advance

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Balance-Salud Mental</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width", user-scalable=no, initial-scale=1, maximun-scale=1, minimun-scale=1"/>
    <meta name="description" content="Tu salud mental es importante, cuidala con los profesiones adecuados. "/>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
        
    <link rel="icon" href="img/favicon.png">
    <link rel="stylesheet" href="css/fontello.css">
    <link rel="stylesheet" href="css/index.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap" rel="stylesheet"/>
</head>

<body>
<header>
    <div class="contenedor">
        <a href="index.html">
        <img src="img/logo.png" class="brand" alt="Salud Mental Peru">
        </a>
        
            
        <input type="checkbox" id="menu-bar">
        <label class="icon-menu-outline" for="menu-bar"></label>
    
        <nav class="menu">
        <a href="quienes_somos.html">¿Quienes Somos?</a>
        <a href="nuestros_profesionales.html">Nuestros Profesionales</a>
        <a href="consultas_citas.html">Consultas y Citas</a>
        <a href="blog.html">Artículos</a>
        </nav>
    </div>            
</header>

<main>
<section id=consultas>  
    <h2>Consultas y Citas</h2> <br>
        <div class="contenedor">
            <p> Consultorio: Av. Arequipa 2555, Lince. Lima. <br>    
                Debido a la coyuntura actual, tambien estamos realizando las consultas a través de videollamadas en la 
                plataforma de tu preferencia.
            </p>
    

            <div class="images">
                <img src="img/whatsapp-png.png" width="70px" height="70px"/>
                <img src="img/skype-png.png" width="100px" height="70px"/>
                <img src="img/messenger-png.png" width="70" height="70px"/>
                <img src="img/meet-png.png" width="70" height="70px"/>
                <img src="img/zoom-png.png" width="120" height="40px"/> 
            </div>
       
            <p>
                Comunícate (whatsapp) y agenda tu cita:
            </p>

            <p>
                Psiquiatría: (+51)999888777 <br>
                Psicología: (+51)999888777
            </p>
        </div>
</section>
</main>


<footer>
    <div class="contenedor">
    <p>2018-2020 Balance Salud Mental &copy; - Designed by Watermelon</p>
    </div>
</footer>    
</body>
</html>

CSS code:

/*CONSULTAS Y CITAS*/

#consultas {
    margin-top: 100px;
    text-align: center;
    
}


#consultas .images {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 10px;
      
}



p {
    padding: 10px;
}
![citastwo|690x232](upload://8CMVL7TIsbcLaTsu0awqc9Lrjy3.jpeg) ![citasone|297x500](upload://qir13y8CGAADVAA4nP5xusWb1m5.jpeg)
2

If you like, upload your code to codepen.io and we’ll check it out therein.

Try to add align-self:center only to zoom.

3

Extender answer.
Instead use this html for the images

          <div class="consultas__images">
              <img src="img/whatsapp-png.png" width="70px" height="70px"/>
              <img src="img/skype-png.png" width="100px" height="70px"/>
              <img src="img/messenger-png.png" width="70" height="70px"/>
              <img src="img/meet-png.png" width="70" height="70px"/>
              <img src="img/zoom-png.png" width="120" height="40px" class="zoom"/> 
          </div>

Paste this CSS instead
/CONSULTAS Y CITAS/


#consultas {
    margin-top: 100px;
    text-align: center;
}


.consultas__images {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 10px;
      
}

.zoom{
  align-self:center;
}
p {
    padding: 10px;
}
@media screen and (max-width:500px){
  .consultas__images>img{padding:10px 0 }
}

Please from now on upload your site to codepen.io so we can help you to learn, I’m giving you the solution just for this time.

1 Like
4

Thanks a lot @anon10002461 , it works!
I have signed up at codepen. I have copied the html and css code. I can´t figure out how to upload the images though. It suppose that is in the “assets” option but I have to pay to do that.
This is the link:

Align zoom icon

Is this what you were asking for?

5

There are many ways to do that.

  1. Upload them to google drive / google photos and find a link (i never tried it).
  2. Upload them to imgur and get the link (this works perfectly).
  3. Upload them to github and find the link to the raw file (also works fine).

In this case, we don’t need an image because you’re including width and height in the element! So it’s even better I believe. We do need for the other post, I believe (didn’t read it very carefully).

That’s exactly what I mean. And you could have asked both questions in one post :slight_smile:

Did the solution I wrote work for you?

6

So, to be clear. I can´t upload images to codepen directly unless I pay. But I can upload images to google drive, imgur or github and send both links (codepen and drive for instance) in the question?
OR, you are telling me that I can upload images to codepen THROUGH drive,imgur or github? :roll_eyes:

7

Exactly. Upload to imgur and you get a link in the website, that link will be the src of your img element.

<img src="someImgurLink" />

For future reference, you can also use unsplash to get images for free. (best practice: just include the author’s name somewhere).

1 Like
8

@anon10002461 I appreciate your time and patience. This will make easier (and efficient) to share my issues with the community. Thanks you very much.

1 Like