Gabriel West Gabriel West - 16 days ago 5
CSS Question

How to center an element between another element and the edge of the container

I've tried centering the first button between the second and the right edge using

margin:0 auto;
then
margin-left:auto; margin-right:auto;
but to no avail. Whats the best way to accomplish this?

<nav class="bg">
<button>Button 1</button>
<button>Button 2</button>
<button id="center">Button 3</button>
</nav>


https://jsfiddle.net/gabewest1/1915gwmy/1/

GvM GvM
Answer

https://jsfiddle.net/1915gwmy/2/ check this updated code

.bg {
    background-color:black; 
  text-align:center;
}
#center {
    margin:auto;
    background-color:green;
}
button {
  float:left;
  margin-right: 5px;
}
button:last-child {
  float:none;
  margin-right: 0;
}
Comments