vertical align for three divs floated in one div-CodePudding

i'd like to align vertically three divs of a container div, but all the 3 divs inside the container are floated, one in right, one in center and one in left, to make a navbar.

I saw all the navbars in bootstrap and I'd like to take 3 navbars divs and put it in one div to make a navbar.

I am a beginner of HTML code, so i hope you all can help me.

.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePudding user response：

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

CodePudding user response：

For the love of all things holy, just dispense with floats altogether. They're old and troublesome and anathema to the whole idea of the Bootstrap layout system. Any tutorial that suggests them should be disregarded.

Also, you seem to be recreating wheels here. This is all available out of the box.

Here's the ticket:

Use a proper container/row/column structure, per the docs.
Put the class align-items-center on the row. This vertically aligns the contents.
Put the class flex-fill on the menu column. This lets it take all available space. I've also applied class justify-content-end to the nav element to align its tabs right.

Notice... absolutely no custom CSS needed.

<head>
  <link rel="stylesheet" href="style.css">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>