Bootstrap-Centering a text in div vertically, with other content in div

Question

I'm trying to vertically center some text in a div with also an image on it, when i use the tags "d-flex align-items-center" it does move to the center but the text itself seems to be somewhat moved towards the top, how could I sove this?

Link to codepen:

https://codepen.io/bladeranner5005/pen/eYGoPQb

Netlify, just go to the contacts section:

https://nostalgic-curie-32c354.netlify.app

Html and CSS code:

/*ESSENTIAL ----------------------------------------------------------------------------------------------------------*/

/*To stop the navbar from covering content, source: https://stackoverflow.com/questions/10336194/top-nav-bar-blocking-top-content-of-the-page*/
body {
    padding-top: 55px;
}



/*To make internal links selection better:*/

html {
    scroll-behavior: smooth;
}

/*Change text size depending on viewport, source: https://css-tricks.com/viewport-sized-typography/ */

h1 {
    font-size: 5.9vw;
}
h2 {
    font-size: 3.0vh;
}
p {
    font-size: 2vmin;
}
/*FONTS --------------------------------------------------------------------------------------------------------------*/

/*Tags from google fonts

Josefin sans light:

font-family: 'Josefin Sans', sans-serif;
font-weight: 300;

Josefin sans regular:

font-family: 'Josefin Sans', sans-serif;
font-weight: 400;

Libre Franklin
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
*/



/*NAVBAR -------------------------------------------------------------------------------------------------------------*/

/*Structure --*/

.nav-item-spacing {
    margin-left:30px;
    margin-right:30px;
}

.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/*Colors --*/

.background-black {
    background-color: black;
}

.nav-link-custom-1 {
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 800;
}

.nav-link-custom-2 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
}

/*HOME-Logo animation ------------------------------------------------------------------------------------------------*/

/*Background --*/

/*
.background-black {
    background: black;
}
*/

/*Structure --*/


.screen-height {
    height: 100vh;
}

.top-logo {
    height: 13vh;
}

@media (max-width:768px) {
    .top-logo {
        height: 30vh;
    }
}

#animation {
    animation: animation 2s;
}

@keyframes animation {
    from {
        transform: translateY(60vh);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 100%;
    }
}

/*CURRICULUM ---------------------------------------------------------------------------------------------------------*/

/*Background --*/

/*
.background-black {
    background: black;
}
*/

/*Structure --*/

/*
.screen-height {
    height: 100vh;
}
*/

.cur-buffer-mid {
    height: 10vh;
}

@media (max-width:768px) {
    .cur-buffer-mid {
        height: 6vh;
    }
}

.cur-buffer-top {
    height: 8vh;
}

/*Text --*/

.home-cur-text {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;

    color: white;

    text-align: center;
}

/*Button --*/

.link-btn {
    border-style: solid;
    border-width: thick;
    border-color: white;

    background-color: black;

    font-family: 'Libre Franklin', sans-serif;
    font-weight: 800;
}

/*MY WORK ------------------------------------------------------------------------------------------------------------*/

/*Structure --*/

.work-buffer {
    height: 10vh;
}

/*Text --*/

.work-text-title {
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 800;
    color: black;

    font-size: 60pt;
}

.work-text-red {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
    color: red;

    font-size: 36pt;
}

.work-text-normal {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    color: black;

    font-size: 24pt;
}

    @media (max-width:768px) {
        .work-text-title {
            font-family: 'Libre Franklin', sans-serif;
            font-weight: 800;
            color: black;

            font-size: 42pt;
        }

        .work-text-red {
            font-family: 'Josefin Sans', sans-serif;
            font-weight: 400;
            color: red;

            font-size: 24pt;
        }

        .work-text-normal {
            font-family: 'Josefin Sans', sans-serif;
            font-weight: 300;
            color: black;

            font-size: 18pt;
        }
    }

/*Button --*/

.link-btn-light {
    border-style: solid;
    border-width: thick;
    border-color: black;

    background-color: white;

    font-family: 'Libre Franklin', sans-serif;
    font-weight: 800;
}

/*INFO ---------------------------------------------------------------------------------------------------------------*/

/*Structure --*/

.info-buffer {
    height: 10vh;
}

.info-buffer-button {
    height: 15vh;
}

/*Text --*/

/*
.work-text-title {
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 800;
    color: black;

    font-size: 60pt;
}
 */

.info-text-title {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
    color: black;

    font-size: 36pt;
}

.info-text-red {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
    color: red;

    font-size: 24pt;
}

.info-text-normal {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    color: black;

    font-size: 24pt;
}

    @media (max-width:768px) {
        .info-text-title {
            font-family: 'Josefin Sans', sans-serif;
            font-weight: 400;
            color: black;

            font-size: 18pt;
        }

        .info-text-red {
            font-family: 'Josefin Sans', sans-serif;
            font-weight: 400;
            color: red;

            font-size: 3vmin;
        }

        .info-text-normal {
            font-family: 'Josefin Sans', sans-serif;
            font-weight: 300;
            color: black;

            font-size: 4vmin;
        }
    }


/*Align text*/

.txt-center {
    text-align: center;
}

.txt-left {
    text-align: left;
}

.txt-right {
    text-align: right;
}

.txt-justify {
    text-align: justify;
}

/*FOOTER -------------------------------------------------------------------------------------------------------------*/

/*Title name----------------------------------------------------------------------------------------------------------*/

.page-title-font {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;

    color: white;
}

/*CONTENT GENERAL-----------------------------------------------------------------------------------------------------*/

.content-title-white {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;

    color: white;
}

.background-white {
    background-color: white;
}

/*CONTENT-INFO--------------------------------------------------------------------------------------------------------*/


.info-text-title-contacts {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
    color: black;

    font-size: 38pt;
}

.info-text-red-contacts {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
    color: red;

    font-size: 24pt;
}

.info-text-normal-contacts {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    color: black;

    font-size: 24pt;
}

@media (max-width:768px) {
    .info-text-title-contacts {
        font-family: 'Josefin Sans', sans-serif;
        font-weight: 400;
        color: black;

        font-size: 18pt;
    }

    .info-text-red-contacts {
        font-family: 'Josefin Sans', sans-serif;
        font-weight: 400;
        color: red;

        font-size: 3vmin;
    }

    .info-text-normal-contacts {
        font-family: 'Josefin Sans', sans-serif;
        font-weight: 300;
        color: black;

        font-size: 3vmin;
    }
}

<!doctype html>
<html lang="it">
<head>
    <!--Required meta tags-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Font links-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&family=Libre+Franklin:wght@800&display=swap" rel="stylesheet">

    <!--Bootstrap CSS-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!--Icons links-->

    <!--Custom css-->
    <link href="../css/index-css.css" rel="stylesheet">

    <link href="../css/contacts-css.css" rel="stylesheet">


    <title>Andrea D'Angelo-Contacts</title>
</head>

<body>

<!-- NAVBAR ----------------------------------------------------------------------------------------------------------->
<!--Modified bootstrap NAVBAR, with different colors and positioning when in desktop----------------------------------->

<nav class="navbar navbar-expand-lg fixed-top navbar-dark background-black">
    <a class="navbar-brand" href="#"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav mx-auto">
            <a class="nav-item nav-link nav-link-custom-1 nav-item-spacing" href="#">Home</a>
            <a class="nav-item nav-link nav-link-custom-1 nav-item-spacing" href="#">Curriculum</a>
            <a class="nav-item nav-link nav-link-custom-1 nav-item-spacing" href="#">Portfolio</a>
            <a class="nav-item nav-link active nav-link-custom-1 nav-item-spacing" href="#">Contatti</a>

            <!--Codice per il dropdown da: https://stackoverflow.com/questions/17904862/bootstrap-position-of-dropdown-menu-relative-to-navbar-item-->

            <!--<li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle nav-link-custom-2 nav-item-spacing" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Language
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item nav-link-custom-2" href="#">
                        <span></span>
                        Italiano</a>
                    <a class="dropdown-item nav-link-custom-2" href="#">
                        <span></span>
                        English</a>
                </div>
            </li>-->
        </div>

        <!--Dropdown item end-->

    </div>
</nav>

<!--Main tag----------------------------------------------------------------------------------------------------------->

<main>

<!--Name--------------------------------------------------------------------------------------------------------------->
<section class="container-fluid">

    <div class="row">

        <div class="col-12 text-center background-black mb-5">
            <h1 class="page-title-font">CONTACTS</h1>
        </div>

    </div>

</section>

<!--CONTENT------------------------------------------------------------------------------------------------------------>

<!--Row one-->

<section class="container-fluid">

    <div class="row container-fluid">

<!--Section: INFO-->

        <div class="col-12 col-md-6">
            <div class="container-fluid">

            <!--Title-->

                <div class="row background-black rounded-pill pb-3 pt-3">

                    <div class="col-1"></div>

                    <div class="col-9 d-flex align-items-center align-middle">
                        <h2 class="content-title-white">Info</h2>
                    </div>

                    <div class="col-2">
                        <img src="../img/icons/contacts/contacts-info.svg" alt="Info icon" class="background-white rounded-circle img-fluid">
                    </div>

                </div>

            <!--Content-->

                <!--DATA-->
                <div class="row">

                    <div class="col-1"></div>

                        <div class="col-9 container-fluid">

                                        <div class="row">
                                            <div class="col-12 txt-center txt-justify">
                                                <h3 class="info-text-title-contacts">Andrea Telemaco D'Angelo</h3>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-6 txt-left">
                                                <p class="info-text-red-contacts">Nazionalità</p>
                                            </div>

                                            <div class="col-6 txt-right">
                                                <p class="info-text-normal-contacts">Italiana</p>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-6 txt-left">
                                                <p class="info-text-red-contacts">Data di nascita</p>
                                            </div>

                                            <div class="col-6 txt-right">
                                                <p class="info-text-normal-contacts">08/04/2000</p>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-6 txt-left">
                                                <p class="info-text-red-contacts">Luogo di nascita</p>
                                            </div>

                                            <div class="col-6 txt-right">
                                                <p class="info-text-normal-contacts">Caserta</p>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-4 txt-left">
                                                <p class="info-text-red-contacts">Email</p>
                                            </div>

                                            <div class="col-8 txt-right">
                                                <p class="info-text-normal-contacts">emailexemple@gmail</p>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-6 txt-left">
                                                <p class="info-text-red-contacts">Telefono</p>
                                            </div>

                                            <div class="col-6 txt-right">
                                                <p class="info-text-normal-contacts">0000000000</p>
                                            </div>
                                        </div>

                        </div>

    <!--TAG-->
                    <div class="col-2">
                    </div>

                </div>

<!--DIVS FOR CONTAINERS-->

                    </div>
                </div>

            <!--CONTENT END-->

</section>



<!--Footer start------------------------------------------------------------------------------------------------------->

<!--Red line-->
<div class="border-top border-5 border-danger" style="width: 100%"></div>


<!--Start container-->
<footer class="container-fluid">

    <!--ROW 1-->
    <div class="row mb-5 mt-5">

        <!--ROW 1-A-->
        <div class="col-12 col-md-6 mb-5 mb-md-0">

            <div class="container-fluid">

                <div class="row">

                    <div class="col-2 col-md-3"></div>

                    <div class="col-8 col-md-6">
                        <a href="#" class="link-btn-light btn btn-light w-100">Home<br>page</a>
                    </div>

                    <div class="col-2 col-md-3"></div>

                </div>

            </div>

        </div>

        <!--ROW 1-B-->
        <div class="col-12 col-md-6">

            <div class="container-fluid">

                <div class="row">

                    <div class="col-2 col-md-3"></div>

                    <div class="col-8 col-md-6">
                        <a href="#" class="link-btn-light btn btn-light w-100">Online<br>curriculum</a>
                    </div>

                    <div class="col-2 col-md-3"></div>

                </div>

            </div>

        </div>

    </div>

    <!--ROW 2-->
    <div class="row mb-5 mt-5">

        <!--ROW 2-A-->
        <div class="col-12 col-md-6 mb-5 mb-md-0">

            <div class="container-fluid">

                <div class="row">

                    <div class="col-2 col-md-3"></div>

                    <div class="col-8 col-md-6">
                        <a href="#" class="link-btn-light btn btn-light w-100">Online<br>portfolio</a>
                    </div>

                    <div class="col-2 col-md-3"></div>

                </div>

            </div>

        </div>

        <!--ROW 2-B-->
        <div class="col-12 col-md-6">

            <div class="container-fluid">

                <div class="row">

                    <div class="col-2 col-md-3"></div>

                    <div class="col-8 col-md-6">
                        <a href="#" class="link-btn-light btn btn-light w-100">Full contacts<br>and info</a>
                    </div>

                    <div class="col-2 col-md-3"></div>

                </div>

            </div>

        </div>

    </div>

</footer>

</main>

<!-- Javascript for Bootstrap --------------------->
<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- Javascript for Bootstrap END------------------>

</body>
</html>

score 1 · Accepted Answer · answered Jan 19 '22 at 02:04

Nadz is correct, Bootstrap adds a bottom margin via _reboot on all title tags. Unlike that answer, without adding more styles and following Bootstrap, add mb-0 class to your h2 content-title-white element and that should center it.

Your h2 now will only maintain the text's height.

You're probably not seeing it in your codepen since the info icon isn't there, so your text is giving the container its height. If you open dev tools in your live version and add mb-0 to your h2 element, you'll see it work.

score 0 · Answer 2 · answered Jan 18 '22 at 22:56

0

The text is slightly moved to the top, because of bootstrap adding a margin-bottom: 0.5rem.

.content-title-white {
    margin-bottom: 0 !important;
}

answered Jan 18 '22 at 22:56

nad

1,068
6
16

Hi, i tried but it doesn't seem to change anything? I'm using bootstrap 5 so it might be a difference in version? – Andrea D'Angelo Jan 18 '22 at 23:50

Bootstrap-Centering a text in div vertically, with other content in div

2 Answers2