Eu quero ter 3 divs alinhados dentro de um container div, algo como isto:
[[LEFT] [CENTER] [RIGHT]]
A div do contêiner tem 100% de largura (sem largura definida), e a div central deve permanecer no centro após redimensionar o contêiner.
Então eu defino:
#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}
Mas torna-se:
[[LEFT] [CENTER] ]
[RIGHT]
Alguma dica?
overflow: hidden;
acenter
coluna. Em seguida, na consulta de mídia para dispositivos pequenos, quando eu tinha as três colunas centralizadas na página uma sobre a outra, eu precisavaoverflow: hidden;
da linha do meio (que era a coluna da direita em dispositivos grandes), caso contrário não tinha altura e não estava centralizada verticalmente entre a linha superior e inferior.Respostas:
Com esse CSS, coloque suas divs assim (flutua primeiro):
PS: Você também pode flutuar para a direita, depois para a esquerda e depois para o centro. O importante é que os carros alegóricos cheguem antes da seção central "principal".
PPS Você geralmente deseja o último dentro
#container
deste trecho:<div style="clear:both;"></div>
que se estenderá#container
verticalmente para conter os dois flutuadores laterais, em vez de tirar sua altura apenas de#center
e possivelmente permitir que os lados se projetem para fora do fundo.fonte
border:solid
. Se for 100%, coloque-o em outra div para posicioná-lo dentro da sua página.Se você não deseja alterar sua estrutura HTML, também pode fazê-lo adicionando
text-align: center;
ao elemento wrapper edisplay: inline-block;
a ao elemento centralizado.Demonstração ao vivo: http://jsfiddle.net/CH9K8/
fonte
Alinhando três divs horizontalmente usando o Flexbox
Aqui está um método CSS3 para alinhar divs horizontalmente dentro de outra div.
jsFiddle
A
justify-content
propriedade assume cinco valores:flex-start
(padrão)flex-end
center
space-between
space-around
Em todos os casos, os três divs estão na mesma linha. Para obter uma descrição de cada valor, consulte: https://stackoverflow.com/a/33856609/3597276
Benefícios do flexbox:
Para saber mais sobre a flexbox, visite:
Suporte ao navegador: O Flexbox é suportado por todos os principais navegadores, exceto o IE <10 . Algumas versões recentes do navegador, como o Safari 8 e o IE10, exigem prefixos de fornecedores . Para uma maneira rápida de adicionar prefixos, use o Autoprefixer . Mais detalhes nesta resposta .
fonte
A propriedade Float não é realmente usada para alinhar o texto.
Esta propriedade é usada para adicionar elemento à direita, esquerda ou centro.
para
float:left
saída será[First][second][Third]
para
float:right
saída será[Third][Second][First]
Isso significa que a propriedade float => left adicionará seu próximo elemento à esquerda do anterior, o mesmo caso com a direita
Além disso, você deve considerar a largura do elemento pai, se a soma das larguras dos elementos filhos exceder a largura do elemento pai, o próximo elemento será adicionado na próxima linha
[Primeiro segundo]
[Terceiro]
Então você precisa considerar todos esses aspectos para obter o resultado perfeito
fonte
Eu gosto dos meus bares apertados e dinâmicos. Isto é para CSS 3 e HTML 5
Primeiro, definir a largura como 100px é limitante. Não faça isso.
Segundo, definir a largura do contêiner para 100% funcionará bem, até que falássemos de uma barra de cabeçalho / rodapé para todo o aplicativo, como uma barra de navegação ou créditos / direitos autorais. Use em
right: 0;
vez disso para esse cenário.Você está usando IDs (hash
#container
,#left
etc) em vez de classes (.container
,.left
etc), o que é bom, a menos que você queira repetir seu padrão de estilo em outro lugar no seu código. Eu consideraria usar classes em seu lugar.Para HTML, não é necessário trocar a ordem por: esquerda, centro e direita.
display: inline-block;
corrige isso, retornando seu código para algo mais limpo e logicamente em ordem novamente.Por fim, você precisa limpar todos os carros alegóricos para que não mexa no futuro
<div>
. Você faz isso com oclear: both;
Para resumir:
HTML:
CSS:
Ponto de bônus se estiver usando HAML e SASS;)
HAML:
SASS:
fonte
Existem vários truques disponíveis para alinhar os elementos.
01. Usando truque de tabela
Mostrar snippet de código
02. Usando o truque do Flex
Mostrar snippet de código
03. Usando truque de flutuação
Mostrar snippet de código
fonte
Isso pode ser feito facilmente usando o CSS3 Flexbox, um recurso que será usado no futuro (quando
<IE9
estiver completamente morto) por quase todos os navegadores.Verifique a tabela de compatibilidade do navegador
HTML
CSS
Resultado:
Mostrar snippet de código
fonte
Com o twitter bootstrap:
fonte
resposta possível, se você quiser manter a ordem do html e não usar o flex.
HTML
CSS
Code Pen Link
fonte
HTML:
CSS:
text-align:center;
dá alinhamento perfeito ao centro.JSFiddle Demo
fonte
Fiz outra tentativa de simplificar isso e alcançá-lo sem a necessidade de um contêiner.
HTML
CSS
Você pode vê-lo ao vivo no JSFiddle
fonte
Usando o Bootstrap 3 , crio 3 divs de largura igual (no layout de 12 colunas, 4 colunas para cada div). Dessa forma, você pode manter sua zona central centralizada, mesmo que as seções esquerda / direita tenham larguras diferentes (se elas não sobrecarregarem o espaço de suas colunas).
HTML:
CSS:
CodePen
Para criar essa estrutura sem bibliotecas, copiei algumas regras do CSS do Bootstrap.
HTML:
CSS:
CopePen
fonte
Aqui estão as alterações que tive que fazer na resposta aceita quando fiz isso com uma imagem como elemento central:
#center
neste caso). Caso contrário, será necessário definirdisplay
comoblock
, e parece centralizar-se em relação ao espaço entre os elementos flutuados.Certifique-se de definir o tamanho da imagem e de seu contêiner:
fonte
Você pode tentar isso:
Seu código html assim:
e seu código css assim:
então, sua saída deve ser assim:
fonte
fonte
Você fez isso corretamente, só precisa limpar seus carros alegóricos. Basta adicionar
para sua classe de contêiner.
fonte
A solução mais fácil é criar uma tabela com 3 colunas e centralizar essa tabela.
html:
css:
fonte
fonte