0

Tenho 4 div criadas, como posso alinhar no centro em tabela. Ou seja a primeira linha com as duas div e a segunda linha com as outras. Utilizando o display table do CSS e sem usar uma tabela HTML.

Exemplo: http://jsfiddle.net/pdg6jkan/1/

4 Respostas 4

1

vi que você codificou os elementos div como self-closing (<div id="div1"/>), o que está errado, você deve sempre incluir as tags de abertura e fechamento desse elemento HTML.

Além dessa correção, adicionei as propriedades:

#todos {
    ...
    width: 100px;
    margin: auto;
}

fiz uma nova versão em http://jsfiddle.net/pdg6jkan/3/

1
  • utilisei o seu exemplo, mas no meu codigo não estou a conseguir que funciona. Se utilizar o zoom in e zoom out não ficam em tabela. jsfiddle.net/vpGyL/1422
    – akm
    4/05/2015 às 13:41
1

Caro, penso que a forma mais rápida e segura é esta:

HTML:

<div class="contentor">
    <div class="div1">a</div>
    <div class="div2">b</div>
    <div class="div3">c</div>
    <div class="div4">d</div>
</div>

CSS:

.contentor
{
    width: 100px;
    overflow: hidden;
}

.contentor > div
{
    width: 50%;
    float: left;
    box-sizing: border-box;
}

Teste: http://jsfiddle.net/4u7wtued/2/

PS: editei a resposta porque não tinha entendido que querias 100px e duas linhas

0
1

Usando somente o que tu postou de código, e somente arrumando o que o @Sanção falou das self-closing tabs nas divs, aqui está uma solução:

HTML:

<div id="todos">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</div>

CSS:

#todos{
    width:100px;
    height:100px;
    background-color:purple; /* somente para mostrar que o fundo não aparece*/
}

#div1, #div2, #div3, #div4 { /* Esse trecho do código é para evitar repetição.*/
    width:50px;
    height:50px;
    float: left;
}
#div1{
    background:red;
}
#div2{
    background:blue;
}
#div3{
    background:green;
}
#div4{
    background:yellow; 
}

http://jsfiddle.net/z5f7oomp/

0

Penso que seja isto o que você pretende:

#div-table {
  display: table;
  width: 200px;
}

#div-table div { 
  display: table-row;
  height: 100px;
}

#div-table div .cell { 
  display: table-cell;
}

.green {
    background-color: green;
}

.blue {
    background-color: blue;
}

.red {
    background-color: red;
}

.yellow {
    background-color: yellow;
}
<div id="div-table">
    <div>
        <div class="cell green">1</div>
        <div class="cell blue">2</div>
    </div>
    <div>
        <div class="cell red">3</div>
        <div class="cell yellow">4</div>
    </div>
</div>

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 .