7

Apesar da descontinuação do tag <center>, ela ainda resolveu este meu probleminha d eforma simples, porém gostaria de saber como resolve-lo apenas usando css.

A ideia é colocar dois botões (ou div's) em cada extremo,e no centro colocar dois botões, como na imagem seguinte:

inserir a descrição da imagem aqui

Utilizando a tag <center>, fiz apenas o seguinte:

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

Nota: A div que poderia colocar os dois botões centrais não tem um tamanho fixo, pode mudar dinamicamente, por isto, não utilizei o margin: 0 auto.

Como fazer isso usando css?

2 Respostas 2

4

Há muitas maneiras de se chegar nesse resultado. Veja uma bem simples:

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}

Veja funcionando no JS Fiddle.


Versão com pseudo-seletores:

É praticamente a mesma coisa, só removemos as classes .l e .r. Lembrando que :first-child é CSS2, e o :last-child é 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}

Veja funcionando no JS Fiddle.


**Cuidado: .barra :first-child (com espaço) não é a mesma coisa que .barra:first-child.

5
  • 1
    Para o position:absolute; funcionar corretamente, o elemento pai deve ser posicionado pelo menos com position:relative;, mesmo assim +1 2/10/2014 às 10:38
  • @Jader atualizei conforme a observação, grato.
    – Largato
    2/10/2014 às 10:48
  • Oba! Esta é a solução mais simples que vi até ao momento. @Bacco, muito obrigado mano. :D
    – Cold
    2/10/2014 às 10:49
  • Qual a necessidade do overflow: hidden; @Bacco?
    – Cold
    2/10/2014 às 11:05
  • @Cold até já tirei neste caso, acho que é força do hábito qu eu tenho, pra quando precisar enfiar um float no elemento ele nao escapar :). Mas procure lembrar que o overflow:hidden tem o efeito colateral de esticar a div pra englobar o conteúdo em algumas situações.
    – Largato
    2/10/2014 às 11:07
2

Caso você não tenha restrições com browsers mais antigos, vale a pena utilizar o Flexbox do CSS3:

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

E o HTML seria:

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

Exemplo: FIDDLE

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .