html - 在中间垂直对齐文本

标签 html css twitter-bootstrap bootstrap-4

我想知道我该怎么做才能使图像旁边的文本在中间垂直对齐,以便它在出现在它旁边的图像旁边更加有序。开始片段,你可以点击全屏查看我说的内容

<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/

上一篇:html - 如何在所有字段完成之前禁用 "SAVE"按钮

下一篇:javascript - 无法使 Gtranslate 语言在下拉列表中工作

相关文章:

css - 移动与桌面界面

html - Flex Layout、纵横比、固定宽度和动态宽度列

html - 居中 div 元素而不考虑文本对齐方式

javascript - 当 Maxitem = 1 时,是否可以防止 Selectize 转换为下拉列表?

html - 如何覆盖我的导航栏背景颜色以使其与 jumbotron BG 颜色相同?

html - 将链接添加到垂直导航菜单

html - Bootstrap 表单元素未以水平形式对齐

css - Bootstrap Paper 的单选/复选框输入的 Material 风格在 IE/FF 中被破坏

html - Bootstrap - 网格未对齐

html - 如何去掉 slider 左右两侧不需要的空白区域?