CODEWITHSUNDEEP
htmlcssflexbox
Farihah Chowdhury
Farihah Chowdhury

Reputation: 1

Styling a flex-box container with images and text

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;
    
}

Upvotes: 0

Views: 235

Answers (2)

Musyaffa Choirun Man
Musyaffa Choirun Man

Reputation: 66

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

Upvotes: 1

Arsya Adi Setiawan
Arsya Adi Setiawan

Reputation: 455

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>

Upvotes: 0

Related Questions