引导程序 4 中的垂直对齐 [英] Vertical alignment in bootstrap 4

查看：17
本文介绍了引导程序 4 中的垂直对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在图像上放置一个中心文本.我已经使用 mx-auto 来水平居中我的叠加文本并使用 align-middle 进行垂直对齐.但是垂直对齐不起作用.有人知道为什么吗?

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/><div class="card"><img class="img-fluid card-img" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg" alt="大自然中的鹿"><div class="card-img-overlay d-flex"><div class="mx-auto"><h4 class="card-title align-middle">动物农场</h4><h6 class="text align-middle">乔治奥威尔</h6><p class="card-text align-middle">厌倦了对人类的奴役，一群农场动物反抗并建立了自己的社会......</p>

解决方案

只需使用 my-auto for vertical center...

 
<img class="img-fluid card-img";src=https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg"alt=自然界中的鹿"><div class="card-img-overlay d-flex"><div class="my-auto mx-auto text-center"><h4 class="card-title">Animal Farm</h4><h6 class="text">乔治奥威尔</h6><p class="card-text">一群农场动物厌倦了对人类的奴役，反抗并建立了自己的社会……</p>

http://codeply.com/go/ZQM4ANFcXC

align-middle 将适用于 display: table 或 display: inline 元素.

另见这个类似问题

I'm trying to have a center text over image. I've used mx-auto to Horizontal centering my overlay text and use align-middle for a Vertical alignment. But the vertical alignment didn't work. Does somebody know why ?

  

  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

      <div class="card ">
<img class="img-fluid card-img" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg" alt="Deer in nature">
<div class="card-img-overlay d-flex">
  <div class="mx-auto">
<h4 class="card-title align-middle">Animal Farm</h4>
<h6 class="text align-middle">George Orwell</h6>
<p class="card-text align-middle">Tired of their servitude to man, a group of farm animals revolt and establish their own society...</p>
</div>
</div>
</div>

解决方案

Just use my-auto for vertical center...

  <div class="card">
        <img class="img-fluid card-img" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg" alt="Deer in nature">
        <div class="card-img-overlay d-flex">
            <div class="my-auto mx-auto text-center">
                <h4 class="card-title">Animal Farm</h4>
                <h6 class="text">George Orwell</h6>
                <p class="card-text">Tired of their servitude to man, a group of farm animals revolt and establish their own society...</p>
            </div>
        </div>
  </div>

http://codeply.com/go/ZQM4ANFcXC

align-middle will work on display: table or display: inline elements.

Also see this similar question

这篇关于引导程序 4 中的垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆