html - Bootstrap 4 : align text in div vertically AND horizontally (with given div height)

Question

我正在尝试同时垂直和水平对齐 div 中的文本。
我发现一些解决方案有效，但只有当 div 不必拉伸(stretch)到父级的高度时。
在尝试了很长一段时间以获得垂直对齐之后，我现在不知何故失去了水平对齐。
我真的迷失了如何使用 Bootstrap (以及任何额外的 CSS，如果需要)同时进行两个对齐。
JSFiddle: https://jsfiddle.net/j5xg39fb/47/

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">


<div class="container">
  <div class="row" style="height: 100px;">
  
    <div class="col-sm text-center bg-dark" style="align-self: stretch; align-items: center; display: flex;" >
       <i class="fas fa-search"></i>
Suchen
    </div>
    <div class="col-sm text-center bg-info " style="align-self: stretch; align-items: center; display: flex;">
      <i class="far fa-hand-pointer"></i>
      Stylisten wählen
    </div>
    <div class="col-sm text-center bg-primary" style="align-self: stretch; align-items: center; display: flex;">
      <i class="far fa-calendar-alt"></i>
      Anfrage senden
    </div>
        <div class="col-sm text-center bg-warning" style="align-self: stretch; align-items: center; display: flex;">
      <i class="far fa-smile"></i>
      Verwöhnen lassen
    </div>
  </div>
</div>

Answer 1

好吧，你只需要使用justify-content: center;而不是 align-self: stretch; .另外，请记住，当您使用 Bootstrap 时，有内置的 flex 类及其属性，因此您不必手动将它们声明为样式。您可以阅读更多关于它们的信息 here .
所以你的最终代码应该是这样的:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">


<div class="container">
  <div class="row" style="height: 100px;">
    <div class="col-sm text-center bg-dark d-flex align-items-center justify-content-center">
      <i class="fas fa-search"></i> Suchen
    </div>
    <div class="col-sm text-center bg-info d-flex align-items-center justify-content-center">
      <i class="far fa-hand-pointer"></i> Stylisten wählen
    </div>
    <div class="col-sm text-center bg-primary d-flex align-items-center justify-content-center">
      <i class="far fa-calendar-alt"></i> Anfrage senden
    </div>
    <div class="col-sm text-center bg-warning d-flex align-items-center justify-content-center">
      <i class="far fa-smile"></i> Verwöhnen lassen
    </div>
  </div>
</div>