Cannot center a div inside a div? (html,css)

Question

I am trying to center the items in a navbar (a div inside a div) but it either floats to the right or to the left, but never really in a center position.

(I'm using "navbar-default navbar-fixed-top" for the style of the navbar).

topnav2 is a "logo" that is perfectly placed to the left, but I want the items inside topnav to be placed in th center right next to the logo in topnav2.

.topnav a {
    display: inline-block;
  color: #777777;

  padding: 14px 16px;
  text-decoration: none;
  font-size:22px;
    letter-spacing: 1px;


}

.topnav2 a {
  float: left;
  display: block;
  color: #777777;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size:22px;
    letter-spacing: 1px;
}

<div class="navbar navbar-default navbar-fixed-top">
    <div class="topnav2">
        <a class="navtitle" href="index.html">Projekt</a> 
    </div>
    <div class="topnav" id="myTopnav">
        <a href="#" class="active">Home</a>
        <a href="#">Platzhalter 1</a>
        <a href="#">Platzhalter 2</a>
        <a href="#">Platzhalter 3</a>   
    </div>
</div>

like mentioned above, topnav2 is placed perfectly how I want it, but I somehow couldn't figure out how to center topnav next to topnav2

Daniil · Accepted Answer · 2019-02-16T19:25:49.410

0

Maybe you need just another container to do that?

.topnav a {
    display: inline-block;
  color: #777777;

  padding: 14px 16px;
  text-decoration: none;
  font-size:22px;
    letter-spacing: 1px;


}

.topnav2 a {
  float: left;
  display: block;
  color: #777777;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size:22px;
    letter-spacing: 1px;
}

.container {
  text-align: center;
}

<div class="navbar navbar-default navbar-fixed-top">
<div class="topnav2">
    <a class="navtitle" href="index.html">Projekt</a> 
</div>
<div class="container">
 <div class="topnav" id="myTopnav">
  <a href="#" class="active">Home</a>
     <a href="#">Platzhalter 1</a>
     <a href="#">Platzhalter 2</a>
     <a href="#">Platzhalter 3</a>   
    </div>
</div>
</div>

edited Feb 16 '19 at 19:25

answered Feb 14 '19 at 09:24

Daniil

146
4

Or you can use that https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div – Daniil Feb 14 '19 at 09:27
this one worked perfectly, but when I resize my window, the burger dropdown icon suddenly jumps under the active "home" menu. any fix to that? oh nevermind I found the fix – Hasso Feb 14 '19 at 09:53

score 0 · Answer 2 · answered Feb 14 '19 at 09:24

Just give text-align:center CSS to element .topnav.

Try this JSFiddle or see below code may be it can help you-

.topnav{
  text-align: center;
}

.topnav a {
  display: inline-block;
  color: #777777;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 22px;
  letter-spacing: 1px;
}

.topnav2 a {
  float: left;
  display: block;
  color: #777777;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 22px;
  letter-spacing: 1px;
}

<div class="navbar navbar-default navbar-fixed-top">
  <div class="topnav2">
    <a class="navtitle" href="index.html">Projekt</a>
  </div>
  <div class="topnav" id="myTopnav">
    <a href="#" class="active">Home</a>
    <a href="#">Platzhalter 1</a>
    <a href="#">Platzhalter 2</a>
    <a href="#">Platzhalter 3</a>
  </div>
</div>

EnzoTrompeneers · Answer 3 · 2019-02-14T09:43:58.100

Use flexbox to center your navigation and put your links in list items.

.main-nav {
  display: flex;
  justify-content: center;
  list-style-type: none;
}
.main-nav a {
  margin: 10px;
  border-radius: 5px;
  background: #60B99A;
  color: #fff;
  display: block;
  padding: 10px;
  text-decoration: none;
}

<nav>
  <ul class="main-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">nav 1</a></li>
    <li><a href="#">nav 2</a></li>
    <li><a href="#">nav 3</a></li>
    <li><a href="#">nav 4</a></li>
  </ul>
</nav>

score 0 · Answer 4 · answered Feb 14 '19 at 09:37

0

This code is working fine in my page .navbar{ text-align: center; }

answered Feb 14 '19 at 09:37

Vishnu S Vichu

11
2

Cannot center a div inside a div? (html,css)

4 Answers4