How to align/center text (in a column) under an image? Css html only. using flexbox or something els-CodePudding

Newer to coding and I'm trying to create a mobile first website for reference. I am trying to centre text under three images in my footer. Could someone help me do this? Theres a <h1> and <p> for every image class. I also will need this centre text on other images throughout the website.

Appreciate your help.

Here's my html of the footer:

<section id="main-footer"> 
    <hr>
        <img src="images/forest.png"  alt="forest" width="150" height="125">
        <h1> From the Forest </h1>
        <p> Using sustainably sourced wood and bamboo from well-managed forests. </p>
        <img src="images/returning-roots.png"   alt="returning roots" width="150" height="125">
        <h1> Returning Roots </h1>
        <p> Not Just Planting Trees, Rebuilding Forests. 500,000 Trees & Counting. </p>
        <img src="images/maximize.png"  alt="ying&yang" width="150" height="125">
        <h1> Maximize to Minimize </h1> 
        <p> Processing methods that stretch resources and minimize our impact on the planet. </p> 


</section>

Here's my CSS:

 .forest > h1, p {
    display: flex;
    flex-direction: auto;
    align-items: center;

    
    }

I tried exchanging .forest with #main-footer so it would be:

 .forest > h1, p { }

It did not work as well.

CodePudding user response：

Try the following styles. You should set the child image fully take place inside parent div.

<div >        
    <img src="images/forest.png"  alt="forest" width="150" height="125">
    <h1> From the Forest </h1>
</div>

.parent{
    position: relative;

    img {
        width: 100%;
        height: 100%;
    }
       
    h1 {
        display: absolute;
        top: 50%;
        left: 50%;
        transform: translate(50%, -50%);
    }
}

CodePudding user response：

You just need to set text-align:center; on #main-footer follow below code:

#main-footer{
   text-align:center;
}

<section id="main-footer"> 
    <hr>
        <img src="https://images.pexels.com/photos/9754/mountains-clouds-forest-fog.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"  alt="forest" width="150" height="125">
        <h1> From the Forest </h1>
        <p> Using sustainably sourced wood and bamboo from well-managed forests. </p>
        <img src="https://images.pexels.com/photos/9754/mountains-clouds-forest-fog.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"   alt="returning roots" width="150" height="125">
        <h1> Returning Roots </h1>
        <p> Not Just Planting Trees, Rebuilding Forests. 500,000 Trees & Counting. </p>
        <img src="https://images.pexels.com/photos/9754/mountains-clouds-forest-fog.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"  alt="ying&yang" width="150" height="125">
        <h1> Maximize to Minimize </h1> 
        <p> Processing methods that stretch resources and minimize our impact on the planet. </p> 


</section>