CSS - How to centralize an image inside a grid

Question

I am trying to make a responsive grid that has 3 columns and 3 rows, on the first row there is an image there is supposed to be at the center, just like the title and the text but I can´t find a way to do it, I have tried everything, all of the alignment terms (justify, align, self, items, content) and nothing works. Is there a way to do it?

body {
    margin: 0;
}


.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
    grid-template-rows: 60vh 60vh 60vh;
    row-gap: 80px;
    column-gap: 10px;
    grid-template-areas:"foto1 foto2 foto3"
                        "titulo 1 titulo2 titulo3"
                        "texto1 texto2 texto3";
    justify-content: center;
    align-content: center;
}


#Titulo_firstF, #TitleSecondF, #TitleThirdF {
    text-align: center;
    font-family: Montserrat;
    font-weight: 500;
    font-size: 12pt;
    width: 100%;
}

#TextFirstF, #TextSecondF, #TextThirdF {
text-align: center;
font-family: MontSerrat;
color: black;
font-weight: 300;
font-size: 12pt;
width: 100%;
}

#foto1f img{
    grid-area: foto1;
    width: 20%;
 

}

#foto2f{
    grid-area: foto2;
    width: 19%;

}

#foto3f{
    grid-area: foto3;
    width: 19%;                                                                          

}

#Titulo_firstF {
    grid-area: titulo1;

}

#TitleSecondF {
    grid-area: titulo2;

}

#TitleThirdF {
    grid-area: titulo3;

}

#TextFirstF {
    grid-area: texto1;

}
#TextSecondF {
    grid-area: texto2;

}
#TextThirdF {
    grid-area: texto3;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style teste.css">
    <title>Document</title>
</head>
<body>


    <div class= features>
            <div class= first_feature>
                <img src = "https://www.imagemhost.com.br/images/2021/06/13/mail.png"  class="fotos" id="foto1f"> 
                <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
                <p id = "Titulo_firstF">
                    GET A CUSTOMIZED<BR/>
                    E-MAIL ADRESS AND MORE
                </p>
                <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
                <p id = "TextFirstF">
                    Looking cautiously round, to <br/> 
                    ascertain that they were not <br/> 
                    overheard, the two hags cowered <br/> 
                    nearer to the fire, and chuckled <br/> 
                    heartily.
                </p>
            </div>
            <div class= second_feature>
                <img src="https://www.imagemhost.com.br/images/2021/06/13/edit.png" class="fotos" id="foto2f">
                <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
                <p id= TitleSecondF>
                    40 MILLION HIGH </br>
                    QUALITY IMAGES
                </p>
                <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
                <p id= TextSecondF>
                    At first, for some time, I was not able to </br>
                    answer him one word; but as he had </br>
                    taken me in his arms I held fast by him, </br>
                    or I should have fallen to the ground. </br>
                </p>
            </div>
            <div class = third_feature>
                <img src = "https://www.imagemhost.com.br/images/2021/06/13/card.png" class="fotos" id="foto3f">
                <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
                <p id= "TitleThirdF">
                    CREATE A SIMPLE LOGO
                </p>
                <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
                <p id= TextThirdF>
                    She gave my mother such a turn, </br>
                    that I have always been convinced I </br>
                    am indebted to Miss Betsey for </br>
                    having been born on a Friday. </br>
                </p>
            </div>
    </div>        
    </div>
</body>
</html>

It is supposed to look like this:

`img { position: relative; left: 50%; transform: translateX(-50%); }` quick and dirty — Lynel Hudson, Jun 16 '21 at 22:27

score 1 · Answer 1 · answered Jun 16 '21 at 22:31

you can use this way. Put a img in div tag and use text-aling: center. There are many ways you can do this.

.fotos-block{
    text-align: center;
}

<div class="fotos-block">
<img src = "https://www.imagemhost.com.br/images/2021/06/13/mail.png"  class="fotos" id="foto1f"> 
</div>

score 0 · Answer 2 · answered Jun 16 '21 at 22:48

0

And you can also use this way to center the img.

.fotos{
    display: block;
    margin: auto;
    text-align: center;
}

answered Jun 16 '21 at 22:48

arash moradi

11
2

CSS - How to centralize an image inside a grid

2 Answers2