使用 CSS - 如何將文本發送到圖像右側的 position？

Question

長期（ish）潛伏者，第一次海報。 抱歉，如果這個問題被問了 1000 次，我是編碼新手，我目前正在與 Codecademy 合作一個項目，我希望有人能夠提供一些幫助......

我的任務是復制您在下面的屏幕截圖中看到的布局。 但是，我無法再進一步，因為我一生都無法讓文本顯示在圖像的中心和右側。 我之前得到的最接近的是文本將出現在圖像的右上角。 如果有幫助，我正在使用 html 的文件和單獨的樣式表。

它應該是什么樣子

我的樣子

到目前為止，這是我的 HTML 代碼

<div class="flex-content" id="banner">
        <img class="img2"><img src="images/banner.jpg"></div>
        <div class="supporting-content">
            <h3>Learn something new every day</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><a class="button" href="#">Start here</a>
        </div>
    </div>

任何指導將不勝感激！

阿利金

Answer 1

使用 flexbox 和“flex-direction: row;”