使用 Bootstrap 垂直对齐图像

Question

as you can see from the topic title, I want to center an image in "div" tag with the help of Bootstrap.正如您从主题标题中看到的那样，我想借助 Bootstrap 将图像居中在“div”标签中。 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.从现在开始谢谢你。

Answer 1

Get rid of the position classes on the image and just add align-items-center to the the .row摆脱图像上的位置类，只需将align-items-center添加到.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>

使用 Bootstrap 垂直对齐图像

问题描述

1 个解决方案

解决方案1
2 已采纳 2022-06-09 21:04:58

使用 Bootstrap 垂直对齐图像

问题描述

1 个解决方案

解决方案1 2 已采纳 2022-06-09 21:04:58

解决方案1
2 已采纳 2022-06-09 21:04:58