How to center text at the bottom of a div-CodePudding

I have a website with some cards on it. The cards have 3 pieces of text, a main header, a paragraph, and another header (h2) at the bottom. I want second headers from each card to be the same distance from the bottom of the card. I have tried using some absolute and relative positioning, but I think there are some margins or something that are blocking me from keeping that header centered at the bottom of the card. Can someone help me?

    <section id="lifeSkillsSection">
<h1 class="courseSectionHeader">Life Skills</h1>
<!--begin building course cards\-->
<div class= "courseContainer">
    <div class="courseCard">
        <div class="courseText">
            <h1 class= "courseHeader">Basics of Personal Finance</h1>
            <p class="courseDescription">Sign up for this class to learn all the critical topics and rules of personal finance. 
                                Upon completion of this course, you will know how to build a budget, balance
                                a checkbook, the basics of financing a car or house, and more! We reccomend that all 
                                Nehemiah Family Members without a broad understanding of personal finance
                                take this course. Click this card to sign up!
            </p>
            <h2 class="timeLength">This course has 3 classes and 1 qualification test.</h2>
        </div>
    </div>
    <div class="courseCard">
        <div class="courseText">
            <h1 class= "courseHeader">Principles of Manufacturing</h1>
            <p class="courseDescription">Sign up for this class to learn about all the critical elements of consumer goods manufacturing. 
                                Upon completion of this course, you will know how operations and supply chains work together, 
                                how manufacturing plants analyze data, the basic principles of quality assurance, and more! We reccomend that all 
                                Nehemiah Family Members take this course. Click this card to sign up!
            </p>
            <h2 class="timeLength">This course has 4 classes and 1 qualification test.</h2>
        </div>
    </div>
</div>

<!--next row of cards-->
<div class= "courseContainer">
    <div class="courseCard">
        <div class="courseText">
            <h1 class= "courseHeader">Faith and Spiritual Healing</h1>
            <p class="courseDescription">Are you a person of faith? Do you want to dive deeper into your spirituality? This course focuses
                                        on the main principles of faith and spirituality to encourage students to always seek a higher understanding. 
                                        We want our Family Members to be passionate about their faith and give them an opportunity to learn more and express
                                        their spiritual desires. Click this card to sign up for this course!
            </p>
            <h2 class="timeLength">This course has 3 classes.</h2>
        </div>
    </div>
    <div class="courseCard">
        <div class="courseText">
            <h1 class= "courseHeader">Foundations of Family & Parenthood</h1>
            <p class="courseDescription">In this class we teach what it takes to be an effective parent and develop a strong and healthy relationship
                                        with your family. Learn about the basics of raising an infant, important techniques and strategies to help your children grow,
                                        fun things you can do to bring your family together, and more! Click this card to sign up for the course!
            </p>
            <h2 class="timeLength">This course has 3 classes.</h2>
        </div>
    </div>
</div>
</section>

Here is my css

.courseSectionHeader{
text-align: center;
font-family: "Source Sans Pro", sans-serif;
font-size: 40px;
margin-top: 40px;
}

/*size containers and cards so that they can stretch as screen size changes*/

.courseContainer{
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.courseCard{
    display: flex;

    padding: 30px;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 40px;
    margin-bottom: 40px;
    width: 500px;
    height: auto;

    border-radius: 18px;
    background: #800400;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.9);

    text-align: center;
    justify-content: center;
    font-family: "Source Sans Pro", sans-serif;
}



.courseCard:hover{
    background-color: #c0221d;
    cursor: pointer;
}

.courseText{
    font-family: "Source Sans Pro",sans-serif;
    color: white;
}

.courseHeader{
    font-weight:900;
}

.courseDescription{

    margin-top: 10%;
}

.timeLength{

    margin-bottom: 5%;
    margin-top: auto;
}

Can someone help me figure out how to have all those bottom headers the same distance from the bottom of the card?

CodePudding user response：

You could use flexbox to solve it. This issue is more likely to be titled: How can I center a child element at the bottom of a parent element.

Anyway, you could try adding these styles to your existing rules:

/* flex-container */
.courseCard {
  display: flex;
  flex-direction: column;
}

/* This rule remains the same. It's a flex-item */
.timeLength{
    margin-bottom: 5%;
    margin-top: auto;
}

If you apply auto margins to a flex item, that item will automatically extend its specified margin to occupy the extra space in the flex container, depending on the direction in which the auto-margin is applied.

CodePudding user response：

I would add position style to your element you want to add to bottom of card, and one more position style to parent element. So, it is position: relative to <div and position: absolute; bottom: 0px <h2

.courseSectionHeader{
text-align: center;
font-family: "Source Sans Pro", sans-serif;
font-size: 40px;
margin-top: 40px;

}

/*size containers and cards so that they can stretch as screen size changes*/

.courseContainer{
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.courseCard{
    display: flex;
    padding: 30px;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 40px;
    margin-bottom: 40px;
    width: 500px;
    height: 600px;

    border-radius: 18px;
    background: #800400;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.9);

    text-align: center;
    justify-content: center;
    font-family: "Source Sans Pro", sans-serif;
    position: relative;
}



.courseCard:hover{
    background-color: #c0221d;
    cursor: pointer;
}

.courseText{
    font-family: "Source Sans Pro",sans-serif;
    color: white;

}

.courseHeader{
    font-weight:900;
}

.courseDescription{

    margin-top: 10%;
}

.timeLength{
 margin-bottom: 5%;
    margin-top: auto;
    position: absolute;
bottom: 0px;
}

 <section id="lifeSkillsSection">
<h1 class="courseSectionHeader">Life Skills</h1>
<!--begin building course cards\-->
<div class= "courseContainer">
    <div class="courseCard">
        <div class="courseText">
            <h1 class= "courseHeader">Basics of Personal Finance</h1>
            <p class="courseDescription">Sign up for this class to learn all the critical topics and rules of personal finance. 
                                Upon completion of this course, you will know how to build a budget, balance
                                a checkbook, the basics of financing a car or house, and more! We reccomend that all 
                                Nehemiah Family Members without a broad understanding of personal finance
                                take this course. Click this card to sign up!
            </p>
            <h2 class="timeLength">This course has 3 classes and 1 qualification test.</h2>
        </div>
    </div>
    <div class="courseCard">
        <div class="courseText">
            <h1 class= "courseHeader">Principles of Manufacturing</h1>
            <p class="courseDescription">Sign up for this class to learn about all the critical elements of consumer goods manufacturing. 
                                Upon completion of this course, you will know how operations and supply chains work together, 
                                how manufacturing plants analyze data, the basic principles of quality assurance, and more! We reccomend that all 
                                Nehemiah Family Members take this course. Click this card to sign up!
            </p>
            <h2 class="timeLength">This course has 4 classes and 1 qualification test.</h2>
        </div>
    </div>
</div>

<!--next row of cards-->
<div class= "courseContainer">
    <div class="courseCard">
        <div class="courseText">
            <h1 class= "courseHeader">Faith and Spiritual Healing</h1>
            <p class="courseDescription">Are you a person of faith? Do you want to dive deeper into your spirituality? This course focuses
                                        on the main principles of faith and spirituality to encourage students to always seek a higher understanding. 
                                        We want our Family Members to be passionate about their faith and give them an opportunity to learn more and express
                                        their spiritual desires. Click this card to sign up for this course!
            </p>
            <h2 class="timeLength">This course has 3 classes.</h2>
        </div>
    </div>
    <div class="courseCard">
        <div class="courseText">
            <h1 class= "courseHeader">Foundations of Family & Parenthood</h1>
            <p class="courseDescription">In this class we teach what it takes to be an effective parent and develop a strong and healthy relationship
                                        with your family. Learn about the basics of raising an infant, important techniques and strategies to help your children grow,
                                        fun things you can do to bring your family together, and more! Click this card to sign up for the course!
            </p>
            <h2 class="timeLength">This course has 3 classes.</h2>
        </div>
    </div>
</div>
</section>