Bootstrap 4 垂直对齐文本不会在卡片上居中 [英] Bootstrap 4 vertical align text won't center on card

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

问题描述

尝试垂直对齐以下卡片中的文本中心:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"><div class="row text-center h-100"><div class="col-md-3 text-center my-auto"><div class="card card-block justify-content-center" style="height: 120px"><div class="card-body">这是卡片正文中的一些文本.

我完全知道这里有许多类似的问题，但是我尝试了各种解决方案，但似乎没有一个对我的卡有效.

我在 parent、card 和 card-body 上尝试了my-auto".我试过d-flex align-items-center h-100"和justify-content-center".还尝试使用 display 属性.我错过了什么?

解决方案

这里是一个使用 flexbox 的 bootstrap 4 文档的解决方案.阅读更多此处

你需要知道的，

d-flex -> 使元素成为弹性盒.

align-items-center - 垂直对齐内容.

justify-content-center - 水平对齐内容.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"><div class="row text-center h-100"><div class="col-md-3 text-center my-auto"><div class="card card-block d-flex" style="height: 120px"><div class="card-body align-items-center d-flex justify-content-center">这是卡片正文中的一些文本.

Trying to vertically align the text center in the following card:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="row text-center h-100">
  <div class="col-md-3 text-center my-auto">
    <div class="card card-block justify-content-center" style="height: 120px">
      <div class="card-body">
        This is some text within a card body.
      </div>
    </div>
  </div>
</div>

I am fully aware of the many similar questions here, however I tried various solutions and none of them seems to work for my cards.

I tried "my-auto" on parent, card, and card-body. I tried "d-flex align-items-center h-100" and "justify-content-center". Also tried to play around with the display property. What am I missing?

解决方案

Here is a solution using bootstrap 4 documentation for flexbox. Read more here

What you need to know,

d-flex -> makes the element a flexbox.

align-items-center - vertically aligns the content.

justify-content-center - horizontally aligns the content.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="row text-center h-100">
  <div class="col-md-3 text-center my-auto">
    <div class="card card-block d-flex" style="height: 120px">
      <div class="card-body align-items-center d-flex justify-content-center">
        This is some text within a card body.
      </div>
    </div>
  </div>
</div>

这篇关于Bootstrap 4 垂直对齐文本不会在卡片上居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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