CSS 问题：在带有图像的框中居中放置文本
CSS Problem : Center Text in a box with Image
有人可以帮忙吗？
我正在努力获得一些 CSS- 工作代码。
我需要三个箱子；他们需要看起来像图片中的样子
但是当我 运行 我的代码时，文本总是在图像下方。
谁能告诉我我做错了什么？ :
https://codepen.io/arminx2/full/wYPxZe
</div><div style="margin-top: 16px; background: white; box-shadow: rgba(76, 76, 76, 0.25) -1px 1px 2px 1px; padding: 12px; height: 70px; border-radius: 2px; flex-direction: row; align-items: center; cursor: pointer; opacity: 1; transition: all 1s linear 0s;"><img src="http://relationshiphero.com/images/sageTeal.png" style="height: 32px; width: 32px; margin-right: 16px;"><div><div style="font-size: 12px; color: rgb(5, 26, 90); margin-bottom: 2px;">16% better value</div><div style="color: rgb(0, 112, 232); font-size: 14px; font-weight: bold;">Sage - 60 minutes</div></div><div style="margin-left: auto; margin-right: 8px; color: rgb(0, 112, 232);"><img src="/images/triangleRight.png" style="width: 16px; height: 16px;"></div></div><div style="margin-top: 16px; background: white; box-shadow: rgba(76, 76, 76, 0.25) -1px 1px 2px 1px; padding: 12px; height: 70px; border-radius: 2px; flex-direction: row; align-items: center; cursor: pointer; opacity: 1; transition: all 1s linear 0s;"><img src="http://relationshiphero.com/images/heroTeal.png" style="height: 32px; width: 32px; margin-right: 16px;"><div><div style="font-size: 12px; color: rgb(5, 26, 90); margin-bottom: 2px;">38% better value</div><div style="color: rgb(0, 112, 232); font-size: 14px; font-weight: bold;">Hero - 240 minutes</div></div><div style="margin-left: auto; margin-right: 8px; color: rgb(0, 112, 232);"><img src="http://relationshiphero.com/images/triangleRight.png" style="width: 16px; height: 16px;"></div></div></div></div><div class="rightSec"><div style="position: absolute; height: 450px; width: 341.8px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; background-image: url("/images/home/howItWorks5.jpg"); background-size: cover; background-position: center top;"></div></div></div></div>
我不确定我做错了什么。如果有人能看看这个，我将不胜感激。
谢谢
您需要将 display: flex; 属性添加到使用 flexbox
的元素
有人可以帮忙吗？ 我正在努力获得一些 CSS- 工作代码。
我需要三个箱子；他们需要看起来像图片中的样子
但是当我 运行 我的代码时，文本总是在图像下方。
谁能告诉我我做错了什么？ :
https://codepen.io/arminx2/full/wYPxZe
</div><div style="margin-top: 16px; background: white; box-shadow: rgba(76, 76, 76, 0.25) -1px 1px 2px 1px; padding: 12px; height: 70px; border-radius: 2px; flex-direction: row; align-items: center; cursor: pointer; opacity: 1; transition: all 1s linear 0s;"><img src="http://relationshiphero.com/images/sageTeal.png" style="height: 32px; width: 32px; margin-right: 16px;"><div><div style="font-size: 12px; color: rgb(5, 26, 90); margin-bottom: 2px;">16% better value</div><div style="color: rgb(0, 112, 232); font-size: 14px; font-weight: bold;">Sage - 60 minutes</div></div><div style="margin-left: auto; margin-right: 8px; color: rgb(0, 112, 232);"><img src="/images/triangleRight.png" style="width: 16px; height: 16px;"></div></div><div style="margin-top: 16px; background: white; box-shadow: rgba(76, 76, 76, 0.25) -1px 1px 2px 1px; padding: 12px; height: 70px; border-radius: 2px; flex-direction: row; align-items: center; cursor: pointer; opacity: 1; transition: all 1s linear 0s;"><img src="http://relationshiphero.com/images/heroTeal.png" style="height: 32px; width: 32px; margin-right: 16px;"><div><div style="font-size: 12px; color: rgb(5, 26, 90); margin-bottom: 2px;">38% better value</div><div style="color: rgb(0, 112, 232); font-size: 14px; font-weight: bold;">Hero - 240 minutes</div></div><div style="margin-left: auto; margin-right: 8px; color: rgb(0, 112, 232);"><img src="http://relationshiphero.com/images/triangleRight.png" style="width: 16px; height: 16px;"></div></div></div></div><div class="rightSec"><div style="position: absolute; height: 450px; width: 341.8px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; background-image: url("/images/home/howItWorks5.jpg"); background-size: cover; background-position: center top;"></div></div></div></div>
我不确定我做错了什么。如果有人能看看这个，我将不胜感激。
谢谢
您需要将 display: flex; 属性添加到使用 flexbox