HTML CSS如何使用图像作为中心点将元素置于中心

我有一个页面，其中包含一个小图像和右侧的文本. 如何使用图像作为水平中心来将一切置于中心？

<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;">
        <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;">Title 1</p>
                <p style="margin: 0;"><b>Subtitle 1</b></p>
            </div>
        </div>
    </div>
    
    <div style="display: flex; flex-direction: column; align-items: center; width: 200px; margin-left: auto; margin-right: auto;">
        <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;">Title 2</p>
                    <p style="margin: 0;"><b>Subtitle 2</b></p>
            </div>
        </div>
    </div>
</div>

谢谢