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>