HTML CSS 如何使用图像作为中心点使元素居中

Answer 1

对于您的情况，您不需要添加进一步的CSS。

如果您想将图像和副标题都置于标题下方居中，您实际上可以修改 HTML 结构，使标题位于图像和副标题上方：

<div style="padding: 20px; border-radius: 10px; text-align: center;">
    <h2 style="margin-bottom: 20px;"><b>Div Title</b></h2>

    <div style="display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; width: 200px; margin-left: auto; margin-right: auto;">
      <p style="margin: 0;">Title 1</p>
        <div style="display: flex; align-items: center; justify-content: center;">
            <img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="medal" style="height: 50px; width: 50px; margin-right: 10px;">
            <div style="text-align: left;">
                <p style="margin: 0;"><b>Subtitle 1</b></p>
            </div>
        </div>
    </div>

    <div style="display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; width: 200px; margin-left: auto; margin-right: auto;">
      <p style="margin: 0;">Title 2</p>
        <div style="display: flex; align-items: center; justify-content: center;">
            <img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="medal" style="height: 50px; width: 50px; margin-right: 10px;">
            <div style="text-align: left;">
                <p style="margin: 0;"><b>Subtitle 2</b></p>
            </div>
        </div>
    </div>
</div>

您的 p（或字幕）标签是一个显示块，这导致了下降线：

有关更多信息，您可以检查段落元素