垂直对准B. bootstrap 4

我正在尝试在图像上方有一个核心文本。 我用了
https://v4-alpha.getbootstrap. ... ering
对于水平定心文本覆盖并使用
https://v4-alpha.getbootstrap. ... lign/
用于垂直对齐。 但垂直对齐不起作用。 有人知道为什么 ?






 <link href="[url=https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"]https://cdnjs.cloudflare.com/a ... ot%3B[/url] rel="stylesheet"/>

<div class="card">

<img alt="Deer in nature" class="img-fluid card-img" src="[url=https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg"/>]https://snap-photos.s3.amazona ... gt%3B[/url]

<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>
2021-03-21 添加评论
分享

没有找到相关结果

    已邀请:

    知食

    赞同来自:

    刚使用
    my-auto

    为了

    垂直中心

    ...


    <div class="card">
    
<img alt="Deer in nature" class="img-fluid card-img" src="[url=https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg"/>]https://snap-photos.s3.amazona ... gt%3B[/url]
    
<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://www.codeply.com/go/ZQM4ANFcXC

    align-middle

    将努力
    display: table

    或者
    display: inline

    元素。

    也看到这一点
    https://coderoad.ru/42252443/
    2021-03-21 0 0
    分享

    詹大官人

    赞同来自:

    你不需要
    .mx-auto

    . 你可以使用
    .justify-content-center

    ,
    .align-items-center

    和
    .flex-column

    父母。
    https://v4-alpha.getbootstrap. ... xbox/
    /


    <link href="[url=https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"]https://cdnjs.cloudflare.com/a ... ot%3B[/url] rel="stylesheet"/>
    
<div class="card">
    
<img alt="Deer in nature" class="img-fluid card-img" src="[url=https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg"/>]https://snap-photos.s3.amazona ... gt%3B[/url]
    
<div class="card-img-overlay d-flex justify-content-center align-items-center flex-column">
    
<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>
    2021-03-21 0 0
    分享

    奔跑吧少年

    赞同来自:

    尝试使用此代码执行此操作：


    <div class="card">
    
<img alt="Deer in nature" class="img-fluid card-img" src="[url=https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg"/>]https://snap-photos.s3.amazona ... gt%3B[/url]
    
<div class="card-img-overlay d-flex">
    
<div class="mx-auto" style="margin-top: auto;margin-bottom: auto;">
    
<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>


    主要是刚刚添加的
    style="margin-top: auto;margin-bottom: auto;"

    在 div 班级 mx-auto.
    2021-03-21 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    Copyright © 2023, All Rights Reserved