Question

我正在尝试制作“导航栏/工具栏”，其左侧有一个项目（h3），右侧有3个项目（a，a和select）。问题是我希望它们全部垂直居中，仅在我的第一个项目（h3）上有效。为什么会这样？

这是示例：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
  	<div class="col">
      <div class="d-flex">
        <div class="align-self-center">
          <h3 class="pl-4">
            Title
          </h3>
        </div>
        <div class="ml-auto">
          <a class="" href="javascript:void();">
            1
          </a>
          <a class="" href="javascript:void();">
            2
          </a>
          <div class="form-group" style="display: inline-block;">
            <select class="form-control" >
              <option>1</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如何将所有内容垂直居中对齐？任何帮助表示赞赏。

Answer 1

在div上应用align-self-center，该div包含锚标记并进行选择。另外，从包含select的div中删除类form-group，因为它在select上应用了margin-bottom，因此它似乎不在中间。这是我解释的代码更改：

    <div class="container">
        <div class="row">
            <div class="col">
                <div class="d-flex">
                    <div class="align-self-center">
                        <h3 class="pl-4">
                            Title
                        </h3>
                    </div>
                    <div class="ml-auto align-self-center">
                        <a class="" href="javascript:void();">
                            1
                        </a>
                        <a class="" href="javascript:void();">
                            2
                        </a>
                        <div style="display: inline-block;">
                            <select class="form-control" >
                                <option>1</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 2

只需删除“ align-self-center”类。检查更新的代码。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" style="padding:20px;">
  <div class="row">
  	<div class="col">
      <div class="d-flex">
        <div>
          <h3 class="pl-4">
            Title
          </h3>
        </div>
        <div class="ml-auto">
          <a class="" href="javascript:void();">
            1
          </a>
          <a class="" href="javascript:void();">
            2
          </a>
          <div class="form-group" style="display: inline-block;">
            <select class="form-control" >
              <option>1</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

将align-self-center类添加到包含所有子项的父div

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
  	<div class="col">
      <div class="d-flex align-self-center">
       
          <h3 class="pl-4">
            Title
          </h3>
       
        <div class="ml-auto">
          <a class="" href="javascript:void();">
            1
          </a>
          <a class="" href="javascript:void();">
            2
          </a>
          <div class="form-group" style="display: inline-block;">
            <select class="form-control" >
              <option>1</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Bootstrap自我中心仅适用于某些元素

3 个答案: