Vertical Align an Image With Bootstrap

user_19309805 0
Viewed 49

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/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-4 position-relative">
                <div class="position-absolute top-50 start-50 translate-middle">
                    <img class="people-one" src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=384&w=480" alt="">
                </div>
            </div>
            <div class="col-8">
                <p>Text</p>
            </div>
        </div>

    </div>

 

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous">
    </script>
</body>

</html>

Thank you from now.

bootstrap-5 alignment css html
1 Answers

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/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
</head>

<body class="bg-light">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-4">
                  <img class="img-fluid" src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=384&w=480" alt="">
            </div>
            <div class="col-8">
                <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/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous">
    </script>
</body>

</html>

user_192137250
Related