我在这个论坛上搜索了很长时间，但找不到任何可以回答我问题的东西。我有一个有两个并排部分的容器。我希望左侧的文本根据右侧容器的高度在其容器中垂直对齐中心。我使用了 my-auto、m-auto 和其他几个 bootstrap css 类，还有一些我自定义的类，但它们似乎都不起作用。请参阅附加代码以了解（在整个页面中打开或展开代码段以便您可以并排查看各部分）<!DOCTYPE html><html><head> <!-- CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"></head><body> <div> <div class="container-fluid"> <div class="row"> <div class="col-md-6 bg-light"> <div class="m-auto p-5"> <h2>Content that needs to be vertically aligned</h2> </div> </div> <div class="col-md-6 bg-primary"> <div class="ml-5 space-top-2 space-bottom-2 pr-10"> <div class="container"> <div class="row space-bottom-2"> <div class="col-md-3"> </div> <div class="col-md-9"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum egestas leo laoreet nunc congue, at venenatis risus tristique. Suspendisse ac augue metus. Donec finibus velit at accumsan tristique. Sed eu sapien sed purus fringilla pretium. Curabitur ac nisl at massa vulputate hendrerit eget non urna. Praesent nec turpis vitae velit semper efficitur. Nullam a diam rutrum, venenatis nisl sit amet, placerat felis. Nullam semper, augue ut vestibulum venenatis, quam tellus ornare enim, ut mattis nibh ante vitae dui. Nunc elementum, sem at aliquet vulputate, ipsum tellus volutpat arcu, ut imperdiet orci turpis sit amet velit. Sed et eros nec ipsum sagittis scelerisque vel at urna. Nunc ante lacus, </div> </div> </div> </div> </div> </div> </div> </div></body></html>
4 回答
慕婉清6462132
TA贡献1804条经验 获得超2个赞
通过在css中使用flex，我们可以实现这一点。
<div class="col-md-6 bg-light h-100 d-flex align-items-center justify-content-center">
在这里，align-items-center使文本垂直居中并使justify-content-center文本水平居中。
拉丁的传说
TA贡献1789条经验 获得超8个赞
您可以CSS grid为此使用place-item。它将垂直/水平对齐您的文本。
.parent {
display: grid;
place-items: center;
/* meaningless styling */
width: 200px;
height: 200px;
background: lightblue;
resize: both;
overflow: auto;
}
<div class="parent" >
<div class="box">Centered text.</div>
</div>
添加回答
举报
0/150
提交
取消