CODEWITHSUNDEEP
htmlcss
pjlaffey
pjlaffey

Reputation: 23

Center text horizontally and vertically using bootstrap in HTML div

Hi I'm trying to complete this page for freecodecamp and I'm stuck on a few details.

Here's my code

I'm trying to get the "Martin Luther King Jr civil rights hero and icon" title centered vertically in the div. I'm also trying to center horizontally with the h3 tag "Timeline of Martin Luther King Jr.'s Life".

I've tried text-align:center; and the text-center bootstrap class. Neither seemed to work. I've also tried adding !important to see if maybe the bootstrap class was overriding it somehow. Any ideas?

HTML:

<h1 class="display-2 text-center">Martin Luther King Jr</h1>
    <h3 class="text-center text-muted font-italic">civil rights hero and icon</h3>

Upvotes: 2

Views: 1095

Answers (2)

repzero
repzero

Reputation: 8412

Make the div with class row display as a table and the two children as table-cell. Then you can apply a vertical align middle

.row{
  display:table
}
.row .col,.row .col-5{
  display:table-cell;
}
.centered div:first-child{
  width: 100%;
  text-align:center;
}

click here for demo

Upvotes: 1

Varinder
Varinder

Reputation: 2664

Since you're using flex box - you may want to leverage align-items and justify-content properties.

Here's the slightly updated markup and css

HTML

<div class="col centered-content" style="border-style:solid;border-color:grey;border-radius:20px;background-color:white!important;background-color: white;">
    <div class="centered-content__inner">
        <h1 class="display-2 text-center" style="">Martin Luther King Jr</h1>
        <h3 class="text-center text-muted font-italic">civil rights hero and icon</h3>
    </div>
</div>

CSS:

.centered-content {
    display: flex;
    justify-content: center;
    align-items: center;
}
.centered-content__inner {
    background: none;
}

More on content centering with flex box here

Hope this helps :)

Upvotes: 1

Related Questions