html css zurb-foundation zurb-foundation-5

Center elements on Zurb Foundation Top-Bar

I have a top nav-bar made with Foundation 5.

The elements on the nav-bar should be centered. I realize that this question has been asked before(for example here), but none of the answers provided so far have worked. You can see the problem also elsewhere.

As a perfect example of non-centered elements on a nav-bar, check the "Base 2013" template on this website. Download it and open the index.html and you'll see the problem right there.

Various methods have not worked for me so far. Some of the failed experiments:

Set margin: 0px auto; to the <ul> or other elements.

Same applies to text-align:center;.

Any ideas on how to center the elements on this nav-bar?

Solution

You can use flex for that with justify-content like this

<div class="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

.parent {
  width: 100%;
  background: red;
  height: 100px;
  display: flex;
  justify-content: center;
}

.parent div {
  padding: 0 10px;
}

I added padding just to make elements wider and to not stick to each other.