代码之家 › 专栏 › 技术社区 › Tarvo Mäesepp

自举自中心仅适用于某些元素

bootstrap-4 twitter-bootstrap css html

-1

Tarvo Mäesepp · 技术社区 · 7 年前

我正在尝试制作“导航栏/工具栏”,它的左边有一个项目( h3 a , select ). 问题是,我希望它们都垂直居中,这只适用于我的第一个项目( ). 为什么会这样?

<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>

我应该如何将所有内容垂直居中对齐?感谢您的帮助。

3 回复 | 直到 7 年前

1

3

Aditi 7 年前

申请 align-self-center form-group 从封闭的div中选择,因为它正在应用 margin-bottom 在select上,因此它似乎不在中间。下面是我解释的代码更改:

    <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>

2

1

Sumit Patel user1723330 7 年前

只需删除“对齐自中心”类。检查更新的代码。

<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>

3

0

Saurabh Mistry 7 年前

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">
  <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>