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

cdmah0mi 于 2023-01-15 发布在 Bootstrap

关注(0)|答案(2)|浏览(232)

我想垂直对齐容器div中的三个div，但是容器中的三个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>

twitter-bootstrap

来源：https://stackoverflow.com/questions/69920019/vertical-align-for-three-divs-floated-in-one-div

2条答案

按热度按时间

cbjzeqam1#

为了所有神圣事物的爱，干脆完全放弃浮点数吧。它们又老又麻烦，对Bootstrap布局系统的整个想法来说是一种诅咒。任何建议使用它们的教程都应该被忽略。
此外，您似乎在此处重新创建了wheels。This is all available out of the box。
这是入场券：
1.按照the docs，使用适当的容器/行/列结构。
1.将类align-items-center放在行上，这样可以垂直对齐内容。
1.将类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>

赞(0）回复(0）举报 2023-01-15

gk7wooem2#

使用Flexbox

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

赞(0）回复(0）举报 2023-01-15

我来回答

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

2条答案

相关问题

热门标签

最新问答