Search code examples
cssreactjscss-positioncentering

vertically centering my text in a navbar with two divs side by side with CSS and reactJS

I am struggling with vertically aligning the text that is shown in the navbar below. I have one div that extends over the entire navbar as a container, and two child divs two cover each the right and left part of the navbar side by side. Centering it horizontally is no problem.

It's worth noticing that the two divs cover the navbar 50% each, so they have equal sizes.

This is the navbar with its icons and one part of the text i want to display, as you can see neither the text nor the icons get displayed centered vertically. The red line in the center indicates where the navbar is splitted, since the line is drawn by hand ther could be slight inaccuracys

I tried:

  1. Working with margin: 0 auto this doesn't work because I need a margin of -10 at the left to compensate the css elements of my browser (I tried working with a normalizing script but since that didn't work as expected I left it out),
  2. setting box-sizing to border box,
  3. translating y to -50%,
  4. changing the positions to relative on the child and absolute on the parent,
  5. Setting top to 50% (doesn't work since it displaces the navbar child containers),
  6. anything with display: flex doesn't work, because I need the two child elements to be inline blocks to fit next to each other.

Here's my code:

.wrapper {
  width: 100vw;
  height: 2.5cm;
  margin-top: -10px;
  align-items: baseline;
  position: relative;
}

.topnav-left {
  margin-left: -10px;
  background-color: #18191C;
  height: 2cm;
  width: 50vw;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.topnav-right {
  background-color: #18191C;
  height: 2cm;
  width: 50vw;
  display: inline-block;
}


<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div className="wrapper">
  <div className="topnav-left">
    <Link to="/About"><u>Über</u></Link>
  </div>
  <div className="topnav-right">
    <Link to="/settings"><i class="material-icons">settings</i></Link> <!-- uses gooogle font incons -->
    <Link to="/profile"><i class="material-icons">person</i></Link> <!-- uses gooogle font incons -->
  </div>
</div>

Is there something I am missing, or perhaps a completely different idea?

Any help is appreciated

PS: there are other questions that needs help by vertically aligning text, but most of those aren't as specific on the situation; I looked at those questions and followed little steps provided in other examples but none of these worked for me.

Edits: I have added my html file for clarification of my problem so the code can be understand in a better way


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

    <style>
      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
      </style>
    
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />

    <link rel="icon" href="Images/logo.png" /> 
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <!-- Use of google font icons -->  

    <title>GFOS Award</title>

  </head>
  <body style="overflow: hidden;">
    <div id="root" style="height: 100vh;" ></div>
  </body>
</html>

This is what happens if i use the configuration given as an answer, since i am pretty new to react and css i have not found the source of this issue

This is what happens if i use the configuration given as an answer, since i am pretty new to react and css i have not found the source of this issue

Solution

  • why cant u use display flex? if you just want the left div to have 50% width of the parent element, write this:

    

.topnav-left{
float: left;
width: 50%;
display:flex;
align-items:center;
}

.topnav-right{
float: right;
width: 50%;
display:flex;
align-items:center;
}

    because you use float, you can use display: flex since the child divs dont need to be inline blocks anymore