How do I center my content in the middle of the screen?

HTML-CSS
1

I have the text and <a> tags for the buttons but I try everything my stuff does not go to the middle of the screen.

         <section class="banner_main">
            <div class="container-fluid">
               <div class="row d_flex">
                  <div class="col-md-5">
                     <div class="text-bg">
                        <h1>Hire Me!<br>Coding</h1>
                        <span>Lessons Too!!!!</span>
                        <a href="#">Hire Me!</a>
                        <br>
                        <br>
                        <a href="#">Take The Lesson</a>
                     </div>
                  </div>
                  </div>
               </div>

.text-bg {
     text-align: center;
     max-width: 429px;
     width: 100%;
     padding-top: 190px;
     padding-bottom: 50px;
}

.text-bg h1 {
     color: #ffffff;
     font-size: 67px;
     line-height: 90px;
     padding-bottom: 70px;
     font-weight: bold;
     
}

.text-bg strong {
     font-size: 27px;
     line-height: 35px;
     color: #2d2c2c;
}

.text-bg span {
     font-family: 'Baloo Chettan', cursive;
     color: rgb(43, 255, 0);
     font-size: 40px;
     line-height: 50px;
     font-weight: bold;
     display: block;
     background-color: rgb(5, 0, 0);
     width: 80%;
     text-align: center;
     border-radius: 30px;
     margin-bottom: 30px;
     height: 100px;
     display: flex;
     justify-content: center;
     align-items: center;
}

.text-bg a {
     font-size: 17px;
     background-color: #2d2c2c;
     color: #fff;
     padding: 13px 0px;
     width: 100%;
     max-width: 190px;
     text-align: center;
     display: inline-block;
     transition: ease-in all 0.5s;
     border-radius: 15px;
}

.text-bg a:hover {
     background-color: #2bcc91;
     color: #fff;
     transition: ease-in all 0.5s;
     border-radius: 26px;
}

image

2

The text-align on text-bg is only going to center the content inside the col-md-5 column. The column is not being centered. You can try adding the mx-auto class (<div class="col-md-5 mx-auto">).

Also, the flex BS class is d-flex, not d_flex (hyphen -, not underscore _).

Edit: Just noticed, you also need an auto margin on the span as it has 80% width.

If that doesn’t work I think you might have to post a more complete example as well. What version of Bootstrap are you using BTW?

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.