Center one Div between two others, one at each end

Question

Center one Div between two others, one at each end

Navigation

#1 by (4 votes)
#2 by (2 votes)

7

Despite the discontinuation of the <center> tag, it still solved this simple problem for me, but I would like to know how to solve it by using css .

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

Usingthe<center>tag,Ijustdidthefollowing:

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

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

How to do this using css ?

css

asked by anonymous 02.10.2014 / 10:34

2 answers

2

If you do not have restrictions with older browsers, it's worth using Flexbox from CSS3:

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

And the 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

02.10.2014 / 12:55

What is the EmptyIterator class for? Count elements in an ArrayList in Java

score 4 · Accepted Answer

There are many ways to achieve this result. Here's a simple thing:

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 at JS Fiddle .

Version with pseudo-selectors :

It's pretty much the same thing, we just remove the .l and .r classes. Remember that :first-child is CSS2, and :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 at JS Fiddle .

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