How to vertical align the first item?-CodePudding

I've been trying : text-align:center, align-items:center.. In this code, I use BootStrap, but I also tried to over-code it via css- nothing helps. I'd really thank you for help.

    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>HTML Final Task</title>
        <!-- CSS only -->
        <link
          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
          crossorigin="anonymous"
        />
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
        />
      </head>
      <body>
        <div >
          <div >
            <div >
              <div ><h3>Adantrip</h3></div>
              <div ><p>Hotels</p></div>
              <div ><p>Rooms</p></div>
              <div ><p>Flights</p></div>
              <div ><p>Cars</p></div>
              <div ><p>Experiences</p></div>
            </div>
            <div >
              <div >USD</div>
              <div ><i ></i></div>
              <div >
                <i ></i> My Account
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>

CodePudding user response：

There is nothing wrong with your code. Some Bootstrap default styles, same as margin-bottom in some tags, affect your code.

Let's make it simple and see the difference then correct it. In this sample, I'm gonna use pure CSS. Remove Bootstrap from your code temporarily and then add these styles:

.nav{display:flex;justify-content:space-between}
.left-box,
.right-box{display:flex;align-items:center;gap: 0.5rem;}

CodePudding user response：

The use of the HTML <p> and <h1> tags are throwing off the Bootstrap layout because of their default attributes. Rather than fight with them, use the classes that Bootstrap provides. align-items-center on your flex containers and the responsive h1 class on the item you want for your header.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Final Task</title>
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
</head>

<body>
  <div >
    <div >
      <div >
        <div >Adantrip</div>
        <div >Hotels</div>
        <div >Rooms</div>
        <div >Flights</div>
        <div >Cars</div>
        <div >Experiences</div>
      </div>
      <div >
        <div >USD</div>
        <div ><i ></i></div>
        <div >
          <i ></i> My Account
        </div>
      </div>
    </div>
  </div>
</body>

</html>