Center images in a Grid (CSS)

Question

I'm doing a one page site for a little consulting team, and in the section were the team appears, I can't make to align the justified content with an image that I would like to add in top of the text.

Here is what I have

HTML

<section>
    <h2 class="altura">Equipo</h2>
    <div class="container">
        <div class="teamg">
            <img class="fotoequipo" src="img/brad1.jpg">
            <h3>Ps. Brad Pitt</h3>
            <h4>Associate</h4>
            <p>Lorem ipsum.</p>
        </div>

        <div class="teamg2">
            <img class ="fotoequipo1" src="img/jen1.jpg">
            <h3>Ps. Jennifer Aniston</h3>
            <h4>Associate</h4>
            <p>Lorem Ipsum.</p>
        </div>
    </div>
</section>

CSS

.altura {
    margin: 3vw 20vw 3vw 20vw;
}
.container {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
}

.teamg {
    grid-column-start: 2;
}

.teamg img {
    align-content: center;
    height: 180px;
    width: 180px;
    border-radius: 50%;
    border: 5px solid #2b2c35;
}

.fotoequipo {
    align-items: center;
    height: 180px;
    border-radius: 50%;
    border: 5px solid #2b2c35;
}

.teamg2 {
    grid-column-start: 4;
}

.teamg2 img {
    align-content: center;
    height: 180px;
    width: 180px;
    border-radius: 50%;
    border: 5px solid #2b2c35;
}

I'm not clear as to what you're asking. https://stackoverflow.com/help/how-to-ask — Andy Hoffman, Apr 03 '20 at 07:36
add the desired result you are looking for so we can help you more — Ziad Darwich, Apr 03 '20 at 07:54

score 2 · Accepted Answer · edited Apr 03 '20 at 07:53

2

you need to center the text like this:

.teamg {
    grid-column-start: 2;
    text-align: center;
  }

and this:

.teamg2 {
   grid-column-start: 4;
   text-align: center;
}

Here is a link of the output

edited Apr 03 '20 at 07:53

Buddy

10,874
5
41
58

answered Apr 03 '20 at 07:45

Robinson Batista Madrigal

126
1
7

Thanks! That fixed the problem :D – Javier Apr 04 '20 at 00:01

score 1 · Answer 2 · answered Apr 03 '20 at 07:59

So if I understand correctly, you are not happy with the alignment of the text beneath the images - because it 'seems' un-centered.

It's actually perfectly centered, but the text is right aligned - and the image is full width.

Here's a tidied up version of your css/html - maybe this will help.

.altura {
    margin: 3vw 20vw 3vw 20vw;
}
.container {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
}

.teamg {
    grid-column-start: 2;
    box-shadow: 0 0 5px grey;
    padding: 5px;
    min-width: 200px;
    text-align: center;
}

.teamg img {
    align-content: center;
    height: 180px;
    width: 180px;
    border-radius: 50%;
    border: 5px solid #2b2c35;
}

.column4 {
    grid-column-start: 4;
}

<section>
    <h2 class="altura">Equipo</h2>
    <div class="container">
        <div class="teamg">
            <img src="https://via.placeholder.com/180">
            <h3>Ps. Brad Pitt</h3>
            <h4>Associate</h4>
            <p>Lorem ipsum.</p>
        </div>

        <div class="teamg column4">
            <img src="https://via.placeholder.com/180">
            <h3>Ps. Jennifer Aniston</h3>
            <h4>Associate</h4>
            <p>Lorem Ipsum.</p>
        </div>
    </div>
</section>

Thanks for the feedback! I never tought that the text was not aligned, now I will be more aware of this :) — Javier, Apr 04 '20 at 00:01

score -2 · Answer 3 · answered Apr 03 '20 at 07:51

-2

<center>
    <img src="path/to/your/image/here"/>
</center>
<style>
img{
    object-fit:center;
}
</style>

answered Apr 03 '20 at 07:51

Wongani Kaluwa

39
4

2

Please first Run your Code And Then Answer – Apr 03 '20 at 09:17

Center images in a Grid (CSS)

3 Answers3