CSS - Centralize li

Question

CSS - Centralize li

Navigation

#1 by (3 votes)

0

I have this navbar and would like to center item 2

ul.navigation {
  width: auto;
  height: 40px;
  position: relative;
  background-color: #fcfcfc;
  padding: 0;
  color: #b5121b;
  list-style-type: none;
  box-shadow: 0 3px #ececec;
  margin: 0;
  z-index: 1;
}
ul.navigation > a > li {
  list-style-type: none;
  display: inline-block;
  height: 40px !important;
  padding: 10px 20px 0px 20px;
  margin: 0;
  max-height: 30px;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
ul.navigation > a > li:hover {
  background-color: #f2f2f2;
  cursor: pointer;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
ul.navigation > a > li {
  color: #b5121b;
}

<ul class="navigation">
  <a href="#"><li>ITEM 1</li>
  </a>
  <a href="#">
    <li class="center">ITEM 2</li>
  </a>
  <a href="#">
    <li>ITEM 3</li>
  </a>
</ul>

html css

asked by anonymous 01.12.2016 / 18:43

1 answer

check if object items are empty How to make animation to show the rest of the paragraph?

score 3 · Accepted Answer

The use of LI is wrong, LI is always the child of UL, there can not be a tag between them.

Out of tune this, you should set the width, in case it seems to be just 3 items, then 32% for each should work fine and switch display: inline-block; to float .

The element that stays in the center auto "aligns" between both, but to cause the centering effect you have to adjust margin-left and margin-right with the width of the elements in the left and right respectively if the width is 32% you can apply margin: 0 32%;

If you have 4 elements just recalculate, the elements will be with 25% or 24% (test because 25% can break) and the element of the center should use float instead of margin-left and margin-right to align.

Note: for 3 elements you could use 33% , but may need box-sizing: border-box; to fit together with borders or other spacing.

ul.navigation {
  width: auto;
  height: 40px;
  position: relative;
  background-color: #fcfcfc;
  padding: 0;
  color: #b5121b;
  list-style-type: none;
  box-shadow: 0 3px #ececec;
  margin: 0;
  z-index: 1;
}
ul.navigation > li {
  list-style-type: none;
  margin: 0;

  width: 32%;
  text-align: center;

  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
ul.navigation > li:hover {
  background-color: #f2f2f2;
  cursor: pointer;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
ul.navigation > li {
  color: #b5121b;
}
ul.navigation > li > a {
  display: block;
  max-height: 30px;
  height: 40px !important;
  padding: 10px 20px 0px 20px;
}
ul.navigation > li.left {
  float: left;
}
ul.navigation > li.right {
  float: right;
}
ul.navigation > li.center {
  margin: 0 32%;
}

<ul class="navigation">
  <li class="left">
       <a href="#">ITEM 1</a>
  </li>
  <li class="right">
       <a href="#">ITEM 3</a>
  </li>
  <li class="center">
       <a href="#">ITEM 2</a>
  </li>
</ul>