1

Is it possible with css or maybe javascript/jQuery-manipulation to center some navigation items within the same div container, while other itmes in this container (last three) should be on the right edge of the navbar? I've tried it with flexbox and with inline-block/text-align center. I was able to center the whole div container. But when I moved the last three divs to the right, the remaining items stayed in their position. Based on the fact, that the three items now are on the right side, the width of the centered navbar changed and it should actually move a little bit to the right to be centered again.

Making new wrap elements around these centered and right side elements would be the last choice, since I am running on wordpress with php-menues. Therefore, changing the markup would maybe not so easy, like a simple css or javascript/jquery solution. You may have a look at the fiddle below the posted markup to understand me better ;)

Default HTML-Markup:

<div class="header" style="height: 100px; overflow: visible;">
<div class="row">
<div class="logo" data-margin-top="34px" data-margin-       bottom="10px" data-margin-left="0px" data-margin-right="0px">
            <a class="logo-link" href="http://stackoverflow.com/">
                    <img src="http://www.backstein.com/media/mobil_1376659435_test_logo_neu.jpg" alt="ava" class="logo-1x standard-logo" style="" height="33" width="45">
                </a>
</div>
    <div class="main-menu">
        <ul id="menu-mainnav" class="menu">
            <li id="menu-item-116" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116 dropdown-menu">
                <a href="/link1/" aria-haspopup="true">
                    <span class="menu-text">CENTER </span>
                </a>
                </li>
            <li id="menu-item-263" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-263 dropdown-menu">
                <a href="http://stackoverflow.com/" aria-haspopup="true">
                    <span class="menu-text">CENTER </span>
                </a>
            </li>
            <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75">
                <a href="http://stackoverflow.com/">
                    <span class="menu-text">CENTER </span>
                </a>
            </li>
            <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27">
                <a href="http://stackoverflow.com/">
                    <span class="menu-text">CENTER </span>
                </a>
            </li>
            <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
                <a href="http://stackoverflow.com/">
                    <span class="menu-text">CENTER </span>
                </a>
            </li>
            <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
                <a href="http://stackoverflow.com/">
                    <span class="menu-text">TO RIGHT </span>
                </a>
            </li>
            <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
                <a href="http://stackoverflow.com/">
                    <span class="menu-text">TO RIGHT </span>
                </a>
            </li>
            <li id="menu-item-133" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-133 menu-item-button">
                <a href="http://stackoverflow.com/"> <span class="menu-textmenu-text button button-default button-medium">TO RIGHT
                    </span>
                </a>
            </li>
       </ul></div>      

        </div>

Default CSS:

.header {
  height: 100px;
  overflow: visible;
  padding: 0px;
}

.row {
  position: relative;
  width: 94.44444%;
  margin: 0 auto;
  max-width: 100%;
}

.logo {
  display: inline-block;
  width: auto;
  float: left;
 }

.main-menu {
  float: right;
  position: relative;
  z-index: 200;
  overflow: hidden;
}

 #menu-mainnav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

#menu-mainnav > li {
 float: left;
 margin: 0;
 padding: 0;
 position: relative;
 cursor: pointer;
 display: list-item;
 text-align: match-parent;
 padding-right:11px;
  }

#menu-mainnav > li > a {
 font-size: 11px;
 display: block;
 box-sizing: content-box;
 }

JSFiddle-Example: https://jsfiddle.net/tz0atc4o/1/

Update: Here a fiddle, where I've tried the text-align and inline solution. You may read the CSS-Comments, so you are able to test the thing, when the whole div is centered. In this case just comment out the last css rule. In contrast the the whole centered div, I am not sure if the items are really centered, when the last three are floated to right :/

https://jsfiddle.net/37gc2v9x/

Thanks in advance!

  • possible duplicate: http://stackoverflow.com/q/35250367/3597276 – Michael Benjamin Jun 20 '16 at 11:39
  • Hi, thanks! I've tried this with flexbox and margin: auto. The problem is that I have more than 1 last item, which should be on the right side. This leads to alignment issues in my test, but maybe I was wrong. I will give it another try in the evening, again :) –  Jun 20 '16 at 12:06
  • The number of items doesn't matter. Just apply the `margin-left: auto` to the left-most item in the group you want aligned to the right. Then make sure to add identical phantom items on the left. https://jsfiddle.net/nt4prkaq/5/ – Michael Benjamin Jun 20 '16 at 12:16

4 Answers4

0

add float: right to the last items and others make display: inline-block; and float:none; then only change .menu to text-align: center; and width: 100%;

Eduard Void
  • 2,646
  • 1
  • 13
  • 13
  • Hi, I've already tried that, it could be possible that I have to go to the optician to get some glasses, but I am not sure, if the centered items are really centered when the other itmes are floated to the right. I've made a fiddle https://jsfiddle.net/37gc2v9x/. While I am sure that the items are centered when the whole div is centered, I am not sure, if the items are really centered when the other itmes are floated to right? May you check please, if it is just some kind of optical illusion? For me they seems not to be centered. You may also check my css comments for understanding :) –  Jun 20 '16 at 12:02
  • usually when text-align: center is not centered right there is some margin or padding on the centered items. check this. I give you the suggestion how to reach the result, it will need some corrections like this one. – Eduard Void Jun 20 '16 at 12:12
  • You were right, I had to eliminate some remaining paddings! Thank you very much, you made my day :) –  Jun 21 '16 at 12:10
  • @DoUtDes Please show the result. I can not get to achieve the desired effect. – Gleb Kemarsky Jun 21 '16 at 13:36
  • Hi Gleb, when every
  • item has 12px paddings on the right side, this padding has to be eliminated on the last item, which should be centered, otherwise it would move the whole centered items 12px too far to the left for example. You can check it here: https://jsfiddle.net/cy60te86/4/
    • –  Jun 21 '16 at 16:06
  • Another approach would be using flexbox (justify-content) to center the whole nav div and then take the elements, which should be on the right side out of the flow with position: absolute - then you need to hardcode the right side items (lastt item right: 0 // second last item: right 0 + itemlegnth + padding // third last item: right 0 + itemlegnth(*2) + padding (*2) -- a little bit dirty, but once you calculate the position it works like a charm. When you take items out of the content flow, the flexbox automatically center the remaining items. –  Jun 21 '16 at 16:11
  • @DoUtDes Thank you for the detailed explanation. But now menu items are placed in the center of space between the logo and the right-hand side menu ([view image `A`](http://i.stack.imgur.com/uX70c.png)). Is it what you need? I thought you want to place these items in the center of the Navbar (image `B`). – Gleb Kemarsky Jun 21 '16 at 19:18
  • @GlebKemarsky ah, you´re right. I want the result of B. Do you have any idea what is causing this? Seems to be a problem with the floated items and the logo, since they somehow suppress the container. If I try the other way with the flexbox approach (https://jsfiddle.net/dmb6a0au/4/), this problem seems not to be present. Would be nice to know, if it is possible to achieve the result of B with text-align center for my knowledge ;) –  Jun 21 '16 at 19:51