How do I put a text next to an image when using flex-direction:column;-CodePudding

I'm doing a project for my school about the solar system and I added a line (image) to represent the distance between the planets. I tried searching for an answer but all the other websites told to use float left to position my text

HTML:

<main>
        <div>
            <!-- Images des planetes -->
            <img src="images/Sun.png" alt="Soleil" title="" id="Soleil">
            <p> Text Test Alignment</p>
            <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;
}
p{
    color:white;
}

I also tried text align in both areas and won't work

Link to what my page looks like here

I tried text-align, float, justify-content,align-items. I hope someone could find a solution for this thanks.

CodePudding user response：

Keep your current setup, just nest the img and p in their own div. Then just flex that div.

Also, main div {} is not specific enough. It is targeting all divs under main including those that need flex-direction: row;. I used the direct descendant selector > to increase Specificity.

main>div {
  display: flex;
  align-items: center;
  flex-direction: column;
  row-gap: 2em;
}

main>div>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

main>div>div>p {
  padding: 0 1em;
}

<main>
  <div>
    <div>
      <!-- Images des planetes -->
      <img src="https://dummyimage.com/300/000/fff" alt="Soleil" title="" id="Soleil">
      <p> Text Test Alignment</p>
    </div>
    <div>
      <!-- Images des planetes -->
      <img src="https://dummyimage.com/300/000/fff" alt="Soleil" title="" id="Soleil">
      <p> Text Test Alignment</p>
    </div>
    <div>
      <!-- Images des planetes -->
      <img src="https://dummyimage.com/300/000/fff" alt="Soleil" title="" id="Soleil">
      <p> Text Test Alignment</p>
    </div>
  </div>
</main>

CodePudding user response：

Just wrap inside additional

<main>
        <div>
            <!-- Images des planetes -->
            <div >
                <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>


main div:not(.inner) {
    display: flex;
    align-items: center;
    flex-direction: column;
}

p {
    color:white;
}

.inner {
    display: flex;
}