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

Time：01-19

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/[email protected]/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 >
    <a  href="#"></a>
    <button  type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span ></span>
    </button>
    <div  id="navbarNavAltMarkup">
        <div >
            <a  href="#">Home</a>
            <a  href="#">Curriculum</a>
            <a  href="#">Portfolio</a>
            <a  href="#">Contatti</a>

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

            <!--<li >
                <a  href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Language
                </a>
                <div  aria-labelledby="navbarDropdown">
                    <a  href="#">
                        <span></span>
                        Italiano</a>
                    <a  href="#">
                        <span></span>
                        English</a>
                </div>
            </li>-->
        </div>

        <!--Dropdown item end-->

    </div>
</nav>

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

<main>

<!--Name--------------------------------------------------------------------------------------------------------------->
<section >

    <div >

        <div >
            <h1 >CONTACTS</h1>
        </div>

    </div>

</section>

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

<!--Row one-->

<section >

    <div >

<!--Section: INFO-->

        <div >
            <div >

            <!--Title-->

                <div >

                    <div ></div>

                    <div >
                        <h2 >Info</h2>
                    </div>

                    <div >
                        <img src="../img/icons/contacts/contacts-info.svg" alt="Info icon" >
                    </div>

                </div>

            <!--Content-->

                <!--DATA-->
                <div >

                    <div ></div>

                        <div >

                                        <div >
                                            <div >
                                                <h3 >Andrea Telemaco D'Angelo</h3>
                                            </div>
                                        </div>

                                        <div >
                                            <div >
                                                <p >Nazionalità</p>
                                            </div>

                                            <div >
                                                <p >Italiana</p>
                                            </div>
                                        </div>

                                        <div >
                                            <div >
                                                <p >Data di nascita</p>
                                            </div>

                                            <div >
                                                <p >08/04/2000</p>
                                            </div>
                                        </div>

                                        <div >
                                            <div >
                                                <p >Luogo di nascita</p>
                                            </div>

                                            <div >
                                                <p >Caserta</p>
                                            </div>
                                        </div>

                                        <div >
                                            <div >
                                                <p >Email</p>
                                            </div>

                                            <div >
                                                <p >emailexemple@gmail</p>
                                            </div>
                                        </div>

                                        <div >
                                            <div >
                                                <p >Telefono</p>
                                            </div>

                                            <div >
                                                <p >0000000000</p>
                                            </div>
                                        </div>

                        </div>

    <!--TAG-->
                    <div >
                    </div>

                </div>

<!--DIVS FOR CONTAINERS-->

                    </div>
                </div>

            <!--CONTENT END-->

</section>



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

<!--Red line-->
<div  style="width: 100%"></div>


<!--Start container-->
<footer >

    <!--ROW 1-->
    <div >

        <!--ROW 1-A-->
        <div >

            <div >

                <div >

                    <div ></div>

                    <div >
                        <a href="#" >Home<br>page</a>
                    </div>

                    <div ></div>

                </div>

            </div>

        </div>

        <!--ROW 1-B-->
        <div >

            <div >

                <div >

                    <div ></div>

                    <div >
                        <a href="#" >Online<br>curriculum</a>
                    </div>

                    <div ></div>

                </div>

            </div>

        </div>

    </div>

    <!--ROW 2-->
    <div >

        <!--ROW 2-A-->
        <div >

            <div >

                <div >

                    <div ></div>

                    <div >
                        <a href="#" >Online<br>portfolio</a>
                    </div>

                    <div ></div>

                </div>

            </div>

        </div>

        <!--ROW 2-B-->
        <div >

            <div >

                <div >

                    <div ></div>

                    <div >
                        <a href="#" >Full contacts<br>and info</a>
                    </div>

                    <div ></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/[email protected]/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>

CodePudding user response：

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

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

CodePudding user response：

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.

Page link：https//www.codepudding.com/net/268201.html

Prev:How to autocomplete the user's first name in an HTML input box?
Next:Bootstrap 5 conditional footer
  •  Tags：  
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding