Center a Div between two others, one at each end

Asked

Viewed 290 times

7

Despite the tag discontinuation <center>, she still solved this my problem d eforma simple, but would like to know how to solve it just using css.

The idea is to put two buttons (or div's) at each end, and in the center put two buttons, as in the following image:

inserir a descrição da imagem aqui

Using the tag <center>, I did just the following:

<div style="float: left">
    <p:commandButton  .../>
</div>
<center>
    <p:commandButton ..."/>
    <p:commandButton .../>
</center>
<div style="float: right">
    <p:commandButton .../>
</div>

Note: To div that could put the two center buttons does not have a fixed size, can change dynamically, so I did not use the margin: 0 auto.

How to do this using css?

css

2 answers

4


There are many ways to achieve this result. See a simple one:

HTML

<div class="barra">
   <button class="l">&lt</button>
   <button>Confirmar</button>
   <button>Cancelar</button>
   <button class="r">&gt</button>
</div>

CSS

.barra {
   position: relative;
   padding:0 100px; /* ajuste conforme o tamanho dos botoes das pontas */
   text-align:center;
}

.barra .l {position:absolute;left: 0}
.barra .r {position:absolute;right: 0}

See working on JS Fiddle.


Version with pseudo-selectors:

It’s pretty much the same thing, we just remove the classes .l and .r. Remembering that :first-child is CSS2, and the :last-child is CSS3.

HTML

<div class="barra">
   <button>&lt</button>
   <button>Confirmar</button>
   <button>Cancelar</button>
   <button>&gt</button>
</div>

CSS

.barra {
   position: relative;
   padding:0 100px; /* ajuste conforme o tamanho dos botoes das pontas */
   text-align:center;
}

.barra :first-child {position:absolute;left: 0}
.barra :last-child {position:absolute;right: 0}

See working on JS Fiddle.


**Care: .barra :first-child (with space) is not the same thing as .barra:first-child.

  • 1

    To the position:absolute; function correctly, the parent element shall be positioned at least with position:relative;, even so +1

  • @Jader updated as noted, grateful.

  • Yay! This is the simplest solution I’ve seen so far. @Bacco, thank you so much bro. : D

  • What is the need of overflow: hidden; @Bacchus?

  • @Cold even took this case, I think it is force of habit that I have, for when I need to stick a float in the element it does not escape :). But remember that overflow:Hidden has the side effect of stretching the div to encompass content in some situations.

2

If you don’t have restrictions with older browsers, it’s worth using Flexbox of CSS3:

.conteudo {
    display:flex;
    flex-direction:row;
}
.conteudo .meio {
    flex-grow:1;
    text-align:center;
}
.conteudo .dir, .conteudo .esq {
    flex-basis:50px;
}

And HTML would be:

<div class="conteudo">
    <button class="esq"><-</button>
    <div class="meio"> <!-- Seu conteúdo aqui --> </div>
    <button class="dir"><-</button>
</div>

Example: FIDDLE

Browser other questions tagged css

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