浮动在一个 div 中的三个 div 的垂直对齐答案

【问题标题】：vertical align for three divs floated in one div浮动在一个 div 中的三个 div 的垂直对齐
【发布时间】：2021-12-23 10:48:25
【问题描述】：

我想垂直对齐一个容器 div 的三个 div，但是容器内的所有 3 个 div 都是浮动的，一个在右侧，一个在中心，一个在左侧，以制作导航栏。

我在 bootstrap 中看到了所有导航栏，我想将 3 个导航栏 div 放入一个 div 中以制作导航栏。

我是HTML代码的初学者，所以希望大家能帮助我。

.container {
  width: 100%;
  font-size: 11px !important;
}

.sinistra {
  float: left;
  width: 30%;
  height: 7%;
  background-color: white !important;
  line-height: 10%;
  vertical-align: center;
}

.centro {
  display: inline-block;
  margin: 0 auto;
  width: 30%;
  height: 7%;
  line-height: 10%;
  vertical-align: center;
}

.destra {
  float: right;
  width: 40%;
  height: 7%;
  line-height: 10%;
  vertical-align: center;
}

a {
  font-size: 11px !important;
}

<head>
  <link rel="stylesheet" href="style.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>

<body>
  <div id="container">
    <div class="sinistra">
      <a class="navbar-brand" href="#">
        <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top"> aaaa
      </a>
    </div>
    <div class="centro"> <a>aaa</a></div>
    <div class="destra">
      <ul class="nav nav-tabs">
        <li class="nav-item">
          <a class="nav-link disabled" aria-current="page" href="#">Active</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Separated link</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</body>

【问题讨论】：

float 和 vertical-align 不兼容，查看显示选项 ;) (inline-block, inline-x, table,table-cell,grid,flex )

标签： html css twitter-bootstrap bootstrap-5

【解决方案1】：

使用弹性盒

#container{
  display:flex;
  flex-direction:column;  
  align-items:center;
  width:100%;
  height:30vh;
  justify-content:space-evenly;
  
  }
  
  div{
  border:solid 2px red;
  width:25%;
  text-align:center;
  
  }

<div id='container'>
  <div>a</div>
  <div>b</div>
  <div>c</div>
</div>

【讨论】：

Bootstrap 不需要这些。当您的库已经提供工具时，不要编写自定义 CSS。

【解决方案2】：

为了对所有神圣事物的热爱，完全不用花车。它们陈旧且麻烦，并且对 Bootstrap 布局系统的整个想法感到厌恶。任何建议它们的教程都应该被忽略。

另外，你似乎在这里重新创造了轮子。 This is all available out of the box.

这是票：

根据the docs，使用适当的容器/行/列结构。
将align-items-center 类放在行上。这会垂直对齐内容。
将flex-fill 类放在菜单栏上。这让它占据所有可用空间。我还将 justify-content-end 类应用于 nav 元素以使其标签右对齐。

注意...绝对不需要自定义 CSS。

<head>
  <link rel="stylesheet" href="style.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row flex-nowrap align-items-center">
      <div class="col sinistra">
        <a class="navbar-brand" href="#">
          <img src="https://via.placeholder.com/50" alt="" width="30" height="24" class="d-inline-block align-text-top"> aaaa
        </a>
      </div>

      <div class="col centro">
        <a>aaa</a>
      </div>

      <div class="col flex-fill destra">
        <ul class="nav nav-tabs justify-content-end">
          <li class="nav-item">
            <a class="nav-link disabled" aria-current="page" href="#">Active</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>

【讨论】：