网格中的中心图像（CSS）

Question

我正在为一个小型咨询团队创建一个单页网站，在团队出现的部分中，我无法将合理的内容与我想添加到文本顶部的图像对齐。

这是我所拥有的

超文本标记语言

<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;

}

Answer 1

你需要像这样将文本居中：.teamg {&nbsp; &nbsp; grid-column-start: 2;&nbsp; &nbsp; text-align: center;&nbsp; }和这个：.teamg2 {&nbsp; &nbsp;grid-column-start: 4;&nbsp; &nbsp;text-align: center;}这是输出的链接

Answer 2

因此，如果我理解正确的话，您对图像下方文本的对齐方式不满意 - 因为它“看起来”不居中。它实际上完全居中，但文本右对齐 - 并且图像是全宽。这是 css/html 的整理版本 - 也许这会有所帮助。.altura {&nbsp; &nbsp; margin: 3vw 20vw 3vw 20vw;}.container {&nbsp; &nbsp; display: grid;&nbsp; &nbsp; grid-template-columns: 20% 20% 20% 20% 20%;}.teamg {&nbsp; &nbsp; grid-column-start: 2;&nbsp; &nbsp; box-shadow: 0 0 5px grey;&nbsp; &nbsp; padding: 5px;&nbsp; &nbsp; min-width: 200px;&nbsp; &nbsp; text-align: center;}.teamg img {&nbsp; &nbsp; align-content: center;&nbsp; &nbsp; height: 180px;&nbsp; &nbsp; width: 180px;&nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; border: 5px solid #2b2c35;}.column4 {&nbsp; &nbsp; grid-column-start: 4;}<section>&nbsp; &nbsp; <h2 class="altura">Equipo</h2>&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="teamg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/180">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>Ps. Brad Pitt</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>Associate</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Lorem ipsum.</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="teamg column4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/180">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>Ps. Jennifer Aniston</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>Associate</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Lorem Ipsum.</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></section>

Answer 3

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