<分区>
<分区>
我想知道我该怎么做才能使图像旁边的文本在中间垂直对齐,以便它在出现在它旁边的图像旁边更加有序。开始片段,你可以点击全屏查看我说的内容
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<section id="" class="ts-block ts-xs-text-center">
<div class="container">
<!--end ts-title-->
<div class="row">
<div class="col-md-6" data-animate="ts-zoomIn" data-delay="0.1s">
<h4>Title</h4>
<p align="justify">Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially
unchanged.
</p>
</div>
<div class="col-md-6 text-center pb-5" data-animate="ts-fadeInUp" data-delay="0.1s">
<img src="https://conceptodefinicion.de/wp-content/uploads/2015/08/naturaleza-2-e1439386596208.jpg" class="img-fluid" alt=""/>
</div>
</div>
</div>
</section>
最佳答案
你可以让容器 div
flexbox,然后你可以使用 justify-content
属性让内容居中。像这样:
.row .col-md-6:first-child {
display: flex;
flex-direction: column;
justify-content: center;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<section id="" class="ts-block ts-xs-text-center">
<div class="container">
<!--end ts-title-->
<div class="row">
<div class="col-md-6" data-animate="ts-zoomIn" data-delay="0.1s">
<h4>Title</h4>
<p align="justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
<div class="col-md-6 text-center pb-5" data-animate="ts-fadeInUp" data-delay="0.1s">
<img src="https://conceptodefinicion.de/wp-content/uploads/2015/08/naturaleza-2-e1439386596208.jpg" class="img-fluid" alt="" />
</div>
</div>
</div>
</section>
关于html - 在中间垂直对齐文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57812509/