Styling a flex-box container with images and text

Farihah Chowdhury 0
Viewed 44

For some reason, the flex items by default have a column flex-direction. On top of that, none of the stylings I do seems to be working.

I want the text, image, and buttons to be centered on the page, but can't seem to alter the styling of the container. The items are always all the way to the right in a column format.

Here's the HTML code:

    <div class="wp-item">
    <h6>Date:</h6><p id="date">September 7th, 2022</p>
    </div>
    <div class="wp-item">
    <img src="prompt30.png" id="prompt" alt="prompt30" height="300px">
    </div>
    <div class="wp-item">
    <button onclick="goThroughWritingPromptsLeft()"><i class="fa-sharp fa-solid fa-play fa-rotate-180"></i></button>
    <button onclick="goThroughWritingPromptsRight()"><i class="fa-sharp fa-solid fa-play"></i></button>
    </div>
</div>

Here is the stylesheet code:

.writingprompts-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
}
flexbox css html
2 Answers

I don't know if you wrote the className wrong or something, but this is what I tried and it worked.

.wp-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
<div class="wp-item">
    <h6>Date:</h6><p id="date">September 7th, 2022</p>
    </div>
    <div class="wp-item">
    <img src="prompt30.png" id="prompt" alt="prompt30" height="300px">
    </div>
    <div class="wp-item">
    <button onclick="goThroughWritingPromptsLeft()"><i class="fa-sharp fa-solid fa-play fa-rotate-180"></i></button>
    <button onclick="goThroughWritingPromptsRight()"><i class="fa-sharp fa-solid fa-play"></i></button>
    </div>
</div>

arsyaadi0

You didn't show the complete source code. So I can't diagnose where the fault is. There seems to be another css class that has a higher weight than "writingprompts-container" , because when I run your source code the text, images, and buttons can be centered, like below. (images and buttons not showing because I don't have the source)

screnshot of result when i run your code

Musyaffa Choirun Man0
Related