Styling a flex-box container with images and text-CodePudding

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 >
    <h6>Date:</h6><p id="date">September 7th, 2022</p>
    </div>
    <div >
    <img src="prompt30.png" id="prompt" alt="prompt30" height="300px">
    </div>
    <div >
    <button onclick="goThroughWritingPromptsLeft()"><i ></i></button>
    <button onclick="goThroughWritingPromptsRight()"><i ></i></button>
    </div>
</div>

Here is the stylesheet code:

.writingprompts-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
}

CodePudding user response：

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 >
    <h6>Date:</h6><p id="date">September 7th, 2022</p>
    </div>
    <div >
    <img src="prompt30.png" id="prompt" alt="prompt30" height="300px">
    </div>
    <div >
    <button onclick="goThroughWritingPromptsLeft()"><i ></i></button>
    <button onclick="goThroughWritingPromptsRight()"><i ></i></button>
    </div>
</div>

CodePudding user response：

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