网格中的中心图像（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 {

    grid-column-start: 2;

    text-align: center;

  }

和这个：

.teamg2 {

   grid-column-start: 4;

   text-align: center;

}

这是输出的链接

Answer 2

因此，如果我理解正确的话，您对图像下方文本的对齐方式不满意 - 因为它“看起来”不居中。

它实际上完全居中，但文本右对齐 - 并且图像是全宽。

这是 css/html 的整理版本 - 也许这会有所帮助。

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

Answer 3

<center>

    <img src="path/to/your/image/here"/>

</center>

<style>

img{

    object-fit:center;

}

</style>