Question

我正在为一个小的咨询团队制作一个页面的网站，并且在该团队出现的部分中，我无法使对齐的内容与我想在文本顶部添加的图像对齐。

这就是我所拥有的

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

Answer 1

您需要将文本居中放置：

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

和这个：

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

Here is a link of the output

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

{ "planWorkspaceList": [{ "id": "5e6f40fb7977be7b59bdd6f6", "planId": "5e6f40b465dc7170a4a91b85", "version": 1, "planWorkspaceProduct": { "planProductId": "5e6f40fb7977be7b59bdd6f5", "lineClassId": "fT6lBmYjRgmqoQo48P_H-g", "commercialTypeId": "SPJb3Pb0QvK-knpXwxpy1A", "spotLengthId": "1ecrktlESZGlnMoP5su1Fw", "lineNo": 1, "lineId": "02aa009c-694b-4d72-a7ae-761e8e2b5a74", "channelId": "G7k5_-HWRIuF0-afe7q-rQ", "productId": "5e54fc4a4d82f119a2d7785f", "ratecardId": null }, "rates": { "quarterName": "1Q20", "planWeekRates": [{ "week": "20200106", "weekValue": { "unitRates": { "units": 19, "rate": 0.0, "ratePercent": 0.0 } }


output format:

<center> <img src="path/to/your/image/here"/> </center> <style> img{ object-fit:center; } </style> +--------------------------+--------------------------+---------+--------------------------+------------------------+------------------------+------------------------+--------+--------------------------------------+------------------------+--------------------------+------------+-------------+----------+-------+------+-------------+-------+--+ | id | planId | version | planProductId | lineClassId | commercialTypeId | spotLengthId | lineNo | lineId | channelId | productId | ratecardId | quarterName | week | units | rate | ratePercent | goals | | +--------------------------+--------------------------+---------+--------------------------+------------------------+------------------------+------------------------+--------+--------------------------------------+------------------------+--------------------------+------------+-------------+----------+-------+------+-------------+-------+--+ | 5e6f40fb7977be7b59bdd6f6 | 5e6f40b465dc7170a4a91b85 | 1 | 5e6f40fb7977be7b59bdd6f5 | fT6lBmYjRgmqoQo48P_H-g | SPJb3Pb0QvK-knpXwxpy1A | 1ecrktlESZGlnMoP5su1Fw | 1 | 02aa009c-694b-4d72-a7ae-761e8e2b5a74 | G7k5_-HWRIuF0-afe7q-rQ | 5e54fc4a4d82f119a2d7785f | null | 1Q20 | 20200106 | 19 | 0 | 0 | null | | +--------------------------+--------------------------+---------+--------------------------+------------------------+------------------------+------------------------+--------+--------------------------------------+------------------------+--------------------------+------------+-------------+----------+-------+------+-------------+-------+--+ | 5e6f40fb7977be7b59bdd6f6 | 5e6f40b465dc7170a4a91b85 | 1 | 5e6f40fb7977be7b59bdd6f5 | fT6lBmYjRgmqoQo48P_H-g | SPJb3Pb0QvK-knpXwxpy1A | 1ecrktlESZGlnMoP5su1Fw | 1 | 02aa009c-694b-4d72-a7ae-761e8e2b5a75 | G7k5_-HWRIuF0-afe7q-rQ | 5e54fc4a4d82f119a2d7785f | null | 1Q20 | 20200113 | 13 | 0 | 0 | null | | +--------------------------+--------------------------+---------+--------------------------+------------------------+------------------------+------------------------+--------+--------------------------------------+------------------------+--------------------------+------------+-------------+----------+-------+------+-------------+-------+--+ | 5e453bafa25d1a6262d66afe | 5e453b98a25d1a6262d66af7 | null | 5e453bafa25d1a6262d66afa | hiSUhfVbT5mqbxbmE8TN6w | Z3DViBRsR1KFSW-V1r_Crw | 6Qydhbe3S7atGKlcAZSUtQ | 1 | null | null | null | null | 2020Q2 | 20200106 | 11 | 0 | 0 | null | | +--------------------------+--------------------------+---------+--------------------------+------------------------+------------------------+------------------------+--------+--------------------------------------+------------------------+--------------------------+------------+-------------+----------+-------+------+-------------+-------+--+ | 5e453bafa25d1a6262d66afe | 5e453b98a25d1a6262d66af7 | null | 5e453bafa25d1a6262d66afa | hiSUhfVbT5mqbxbmE8TN6w | Z3DViBRsR1KFSW-V1r_Crw | 6Qydhbe3S7atGKlcAZSUtQ | 1 | null | null | null | null | 2020Q2 | 20200608 | 5 | | 0 | null | | +--------------------------+--------------------------+---------+--------------------------+------------------------+------------------------+------------------------+--------+--------------------------------------+------------------------+--------------------------+------------+-------------+----------+-------+-- strong text----+-------------+-------+--+

在网格（CSS）中居中放置图像

3 个答案: