Vertical Align an Image With Bootstrap-CodePudding

as you can see from the topic title, I want to center an image in "div" tag with the help of Bootstrap. But even though I tried all the ways I could think of and read a few topics, my problem was not solved.

* {
    margin: 0;
    padding: 0;
}

.people-one {

    width: 100%;
    height: 100%;
}

body {
    background-color: #b2b2b2;

}

.paddimages {
    padding: 0;
}

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="login.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>

<body>
    <div >
        <div >
            <div >
                <div >
                    <img  src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=384&w=480" alt="">
                </div>
            </div>
            <div >
                <p>Text</p>
            </div>
        </div>

    </div>

 

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous">
    </script>
</body>

</html>

Thank you from now.

CodePudding user response：

Get rid of the position classes on the image and just add align-items-center to the the .row

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="login.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>

<body >
    <div >
        <div >
            <div >
                  <img  src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=384&w=480" alt="">
            </div>
            <div >
                <p>Parturient platea commodo in orci adipiscing natoque convallis placerat neque condimentum a eu massa parturient lectus vestibulum. Condimentum a dictumst per himenaeos netus porta dictumst scelerisque non suspendisse suspendisse condimentum ullamcorper tristique facilisi vitae in lacinia eros sed feugiat integer a nec litora lobortis. Parturient vehicula adipiscing varius vestibulum consectetur dignissim id ullamcorper senectus torquent auctor etiam ipsum mi conubia. Class vestibulum natoque cursus dictumst euismod mi inceptos adipiscing odio adipiscing parturient scelerisque arcu eu proin a.</p>
                <p>Porttitor habitasse mus justo mus adipiscing imperdiet vivamus maecenas senectus nascetur porta at lacus vestibulum quam a condimentum egestas massa a netus nunc. Nibh mi id a parturient egestas nec non cubilia eu imperdiet parturient ligula a montes vestibulum aliquam nascetur a non. Nascetur phasellus ut ut placerat parturient lobortis sem elit sociis maecenas consectetur habitant vestibulum neque vel scelerisque lobortis ipsum erat cum et magnis vestibulum a iaculis mus a. Blandit ultricies nibh rutrum libero urna nostra lacus purus massa vehicula laoreet fringilla nascetur neque id.</p>
            </div>
        </div>

    </div>

 

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous">
    </script>
</body>

</html>