使用flex-direction:column布局时，如何让文本与图像并排显示？

问题根源在于你的主容器设置了flex-direction: column，这会让所有直接子元素垂直堆叠，所以<p>会默认出现在太阳图片的正下方。float、text-align这类属性对flex容器内的子元素无效，而justify-content/align-items在column方向的flex容器里只会调整垂直方向的对齐，无法实现水平并排。

要实现文本和太阳图片的横向排列，只需把这两个元素包裹在一个独立的flex容器中，让这个子容器负责水平布局：

修改后的HTML代码 #

<main>
    <div>
        <!-- 把太阳和文本放在同一个子容器里 -->
        <div class="planet-group">
            <img src="images/Sun.png" alt="Soleil" title="" id="Soleil">
            <p> Text Test Alignment</p>
        </div>
        <img src="images/lines.png" alt="Ligne"> 
        <img src="images/mercury.png" alt="Mercure" title="Mercure" id="Mercure">
        <img src="images/lines.png" alt="Ligne">
        <img src="images/Venus.png" alt="Vénus" title="Vénus" id="Venus">
        <img src="images/lines.png" alt="Ligne">
        <img src="images/Earth.png" alt="Terre" title="Terre" id="Terre">
        <img src="images/lines.png" alt="Ligne">
        <img src="images/Mars.png" alt="Mars" title="Mars" id="Mars">
        <img src="images/lines.png" alt="Ligne">
        <img src="images/Jupiter.png" alt="Jupiter" title="Jupiter" id="Jupiter">
        <img src="images/lines.png" alt="Ligne">
        <img src="images/Saturn.png" alt="Saturne" title="Saturne" id="Saturne">
        <img src="images/lines.png" alt="Ligne">
        <img src="images/Uranus.png" alt="Uranus" title="Uranus" id="Uranus">
        <img src="images/lines.png" alt="Ligne">
        <img src="images/Neptune.png" alt="Neptune" title="Neptune" id="Neptune">
    </div>
</main>

修改后的CSS代码 #

main div {
    display: flex;
    align-items: center;
    flex-direction: column;
}

/* 新增的子容器样式，实现水平并排并居中对齐 */
.planet-group {
    display: flex;
    align-items: center;
    gap: 10px; /* 可选：控制图片和文本之间的间距 */
}

p{
    color:white;
}

关键说明 #

1. .planet-group容器设置display: flex后，内部的<img>和<p>会默认水平排列（flex-direction: row是flex的默认值）。
2. align-items: center确保文本和图片在垂直方向上居中对齐，避免出现错位。
3. gap属性可以灵活控制图片和文本之间的距离，让布局更美观。

如果后续需要给其他行星也添加文本，只需重复这个逻辑：把对应行星的图片和文本包裹在.planet-group类的容器中即可。

内容的提问来源于stack exchange，提问作者tpz