CSS - Centralize li

Asked

Viewed 3,650 times

0

I have this navbar and would like to center item 2

inserir a descrição da imagem aqui

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
  • 2

    center on what ?

  • Place in the center of the navbar, as if it were a float: center

  • The item1 has to stay left, the 2 center and the 3 right?

  • Item 1 is already in the right place, 2 has to stay in the center and 3 in the right (the 3 I already got, I just need to put the 2 in the center)

1 answer

3


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

Outside adjust this, you must fix the width, in case it seems that there are only 3 items, then 32% for each one should work well and exchange display: inline-block; for float.

The element that is in the center auto "aligns" between both, but to cause the centering effect will have to adjust margin-left and margin-right with the width of the elements on 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 as 25% can break) and the center element should now use float instead of margin-left and margin-right to align.

Note: for 3 elements you could use 33%, but maybe you need to box-sizing: border-box; to fit together with the edges 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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.