vertical - html centralizar horizontal




Centralizando um bloco div sem a largura (14)

seis maneiras de esfolar esse gato:

Botão um: qualquer coisa do tipo display: block assumirá a largura total dos pais. (a menos que combinado com float ou display: flex parent). Verdade. Mau exemplo.

Botão 2: indo para display: inline-block levará à largura automática (ao invés de completa). Você pode centralizar usando text-align: center no bloco de quebra text-align: center . Provavelmente o mais fácil e mais amplamente compatível, mesmo com navegadores 'vintage' ...

.wrapTwo
  text-align: center;
.two
  display: inline-block; // instantly shrinks width

Botão 3: Não há necessidade de colocar nada no envoltório. Então talvez essa seja a solução mais elegante. Também funciona na vertical. (Suporte do navegador para transtlate é bom o suficiente (≥IE9) nos dias de hoje ...).

position: relative;
display: inline-block; // instantly shrinks width
left: 50%;
transform: translateX(-50%);

Btw: Também é uma ótima maneira de centralizar verticalmente blocos de altura desconhecida (em conexão com o posicionamento absoluto).

Botão 4: posicionamento absoluto. Apenas certifique-se de reservar altura suficiente no wrapper, já que ninguém mais irá (nem clearfix nem implícito ...)

.four
  position absolute
  top 0
  left 50%
  transform translateX(-50%)
.wrapFour
  position relative // otherwise, absolute positioning will be relative to page!
  height 50px // ensure height
  background lightgreen // just a marker

Botão 5: float (que traz também elementos em nível de bloco para largura dinâmica) e um deslocamento relativo. Embora eu nunca tenha visto isso em estado selvagem. Talvez haja desvantagens ...

.wrapFive
  &:after // aka 'clearfix'
    content ''
    display table
    clear both

.five  
  float left
  position relative
  left 50%
  transform translateX(-50%)

Atualização: Botão 6: E hoje em dia, você também pode usar flex-box. Observe que os estilos se aplicam ao wrapper do objeto centralizado.

.wrapSix
  display: flex
  justify-content: center

→ código-fonte completo (sintaxe da caneta)

Eu tenho um problema quando tento centralizar o bloco div "produtos" porque eu não sei de antemão a largura div. Alguém tem uma solução?

Atualização: O problema que tenho é que não sei quantos produtos vou exibir, posso ter 1, 2 ou 3 produtos, posso centralizá-los se fosse um número fixo, pois eu saberia a largura do pai div, só não sei como fazer quando o conteúdo é dinâmico.

.product_container {
  text-align: center;
  height: 150px;
}

.products {
  height: 140px;
  text-align: center;
  margin: 0 auto;
  clear: ccc both; 
}
.price {
  margin: 6px 2px;
  width: 137px;
  color: #666;
  font-size: 14pt;
  font-style: normal;
  border: 1px solid #CCC;
  background-color:	#EFEFEF;
}
<div class="product_container">
  <div class="products" id="products">
    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>

    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>   

    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>
  </div>
</div>


A maioria dos navegadores suporta a display: table; Regra de CSS. Esse é um bom truque para centralizar uma div em um contêiner sem adicionar HTML extra nem aplicar estilos de restrição ao contêiner (como text-align: center; que centralizaria todos os outros conteúdos inline no contêiner), mantendo a largura dinâmica div:

HTML:

<div class="container">
  <div class="centered">This content is centered</div>
</div>

CSS:

.centered { display: table; margin: 0 auto; }

.container {
  background-color: green;
}
.centered {
  display: table;
  margin: 0 auto;
  background-color: red;
}
<div class="container">
  <div class="centered">This content is centered</div>
</div>

Atualização (2015-03-09):

A maneira correta de fazer isso hoje é usar as regras do flexbox. O suporte ao navegador é um pouco mais restrito ( suporte à tabela CSS versus suporte ao flexbox ), mas esse método também permite muitas outras coisas e é uma regra de CSS dedicada para esse tipo de comportamento:

HTML:

<div class="container">
  <div class="centered">This content is centered</div>
</div>

CSS:

.container {
  display: flex;
  flex-direction: column; /* put this if you want to stack elements vertically */
}
.centered { margin: 0 auto; }

.container {
  display: flex;
  flex-direction: column; /* put this if you want to stack elements vertically */
  background-color: green;
}
.centered {
  margin: 0 auto;
  background-color: red;
}
<div class="container">
  <div class="centered">This content is centered</div>
</div>


Correção simples que funciona em navegadores antigos (mas usa tabelas e exige que uma altura seja definida):

<div style="width:100%;height:40px;position:absolute;top:50%;margin-top:-20px;">
  <table style="width:100%"><tr><td align="center">
    In the middle
  </td></tr></table>
</div>

Eu encontrei solução interessante, eu estava fazendo slider e tinha que centrar controles de slides e eu fiz isso e funciona bem. Você também pode adicionar a posição relativa ao pai e mover a posição vertical da criança. Dê uma olhada http://jsfiddle.net/bergb/6DvJz/

CSS:

#parent{
        width:600px;
        height:400px;
        background:#ffcc00;
        text-align:center;
    }

#child{
        display:inline-block;
        margin:0 auto;
        background:#fff;
    }  

HTML:

<div id="parent">
    <div id="child">voila</div>
</div>

Eu sei que esta pergunta é antiga, mas estou tentando entender. Muito semelhante à resposta de Bobince, mas com exemplo de código de trabalho.

Faça com que cada produto seja um bloco inline. Centralize o conteúdo do contêiner. Feito.

http://jsfiddle.net/rgbk/6Z2Re/

<style>
.products{
    text-align:center;
}

.product{
    display:inline-block;
    text-align:left;

    background-image: url('http://www.color.co.uk/wp-content/uploads/2013/11/New_Product.jpg');
    background-size:25px;
    padding-left:25px;
    background-position:0 50%;
    background-repeat:no-repeat;
}

.price {
    margin:        6px 2px;
    width:         137px;
    color:         #666;
    font-size:     14pt;
    font-style:    normal;
    border:        1px solid #CCC;
    background-color:   #EFEFEF;
}
</style>


<div class="products">
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
</div>

Veja também: Center inline-blocks com largura dinâmica em CSS


Eu tenho medo que a única maneira de fazer isso sem especificar explicitamente a largura é usar tabelas (suspiro).


Isso centralizará um elemento, como uma Lista ordenada ou Lista não ordenada ou qualquer elemento. Apenas envolva-o com um Div com a classe de outerElement e dê ao elemento interno a classe de innerElement.

A classe outerelement é responsável pelo IE, Mozilla antigo e pelos navegadores mais recentes.

 .outerElement {
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: middle;
        zoom: 1;
        position: relative;
        left: 50%;
    }

.innerElement {
    position: relative;
    left: -50%;
} 

Ligeira variação na resposta de Mike M. Lin

Se você adicionar overflow: auto; (ou hidden ) para div.product_container , então você não precisa de div.clear .

Isto é derivado deste artigo -> http://www.quirksmode.org/css/clearing.html

Aqui está o HTML modificado:

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
</div>

E aqui está CSS modificado:

.product_container {
  overflow: auto;
  /* width property only required if you want to support IE6 */
  width: 100%;
}

.outer-center {
  float: right;
  right: 50%;
  position: relative;
}

.inner-center {
  float: right;
  right: -50%;
  position: relative;
}

A razão, por que é melhor sem o div.clear (além de div.clear errado ter um elemento vazio) é a atribuição excessiva de margem do Firefox.

Se, por exemplo, você tem esse html:

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div style="clear: both;"></div>
</div>
<p style="margin-top: 11px;">Some text</p>

então, no Firefox (8.0 no momento em que escrevo), você verá 11px margem de 11 11px antes de product_container . O pior é que você terá uma barra de rolagem vertical para toda a página, mesmo que o conteúdo se adapte perfeitamente às dimensões da tela.


Um elemento com 'display: block' (como div é por padrão) tem uma largura determinada pela largura de seu contêiner. Você não pode fazer a largura de um bloco depender da largura de seu conteúdo (encolher para ajustar).

(Exceto para blocos que são 'float: left / right' no CSS 2.1, mas não adianta centrar.)

Você pode definir a propriedade 'display' como 'inline-block' para transformar um bloco em um objeto shrink-to-fit que pode ser controlado pela propriedade text-align do pai, mas o suporte ao navegador é irregular. Você pode, na maioria das vezes, usar hacks (por exemplo, ver -moz-inline-stack) se você quiser seguir esse caminho.

O outro caminho a percorrer são as tabelas. Isso pode ser necessário quando você tem colunas cuja largura não pode ser conhecida antecipadamente. Eu não posso realmente dizer o que você está tentando fazer a partir do código de exemplo - não há nada óbvio lá que precisaria de um bloco de encolher para ajustar - mas uma lista de produtos poderia ser considerada tabular.

[PS. nunca use 'pt' para tamanhos de fonte na web. 'px' é mais confiável se você realmente precisa de texto de tamanho fixo, caso contrário, unidades relativas como '%' são melhores. E “clear: ccc both” - um erro de digitação?]

.center{
   text-align:center; 
}

.center > div{ /* N.B. child combinators don't work in IE6 or less */
   display:inline-block;
}

JSFiddle


adicione este css à sua classe product_container

    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 700px;

use css3 flexbox com justify-content: center;

    <div class="row">
         <div class="col" style="background:red;">content1</div>
          <div class="col" style="">content2</div>
    </div>


.row {
    display: flex; /* equal height of the children */
    height:100px;
    border:1px solid red;
    width: 400px;
    justify-content:center;
}

display:table; e defina a margin como auto

Importante pedaço de código:

.relatedProducts {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

Não importa quantos elementos você tenha agora, ele alinhará automaticamente no centro

Exemplo no snippet de código:

.relatedProducts {
    display: table;
    margin-left: auto;
    margin-right: auto;
}
a {
  text-decoration:none;
}
<div class="row relatedProducts">
<div class="homeContentTitle" style="margin: 100px auto 35px; width: 250px">Similar Products</div>
					
<a href="#">test1 </a>
<a href="#">test2 </a>
<a href="#">test3 </a>
</div>


<div class="outer">
   <div class="target">
      <div class="filler">
      </div>
   </div>
</div>

.outer{
   width:100%;
   height: 100px;
}

.target{
   position: absolute;
   width: auto;
   height: 100px;
   left: 50%;
   transform: translateX(-50%);
}

.filler{
   position:relative;
   width:150px;
   height:20px;
}

Se o elemento de destino estiver absolutamente posicionado, você poderá centralizá-lo movendo-o 50% em uma direção ( left: 50% ) e, em seguida, transformando-o 50% na direção da oposição ( transform:translateX(-50%) ). Isso funciona sem definir a largura do elemento de destino (ou com width:auto ). A posição do elemento pai pode ser estática, absoluta, relativa ou fixa.


<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
    </div>
</div>
<div class="clear"></div>
</div>

.outer-center
{
float: right;
right: 50%;
position: relative;
}
.inner-center 
{
float: right;
right: -50%;
position: relative;
}
.clear 
{
clear: both;
}

.product_container
{
overflow:hidden;
}

Se você não fornecer "estouro: oculto" para ".product_container", o div "outer-center" irá se sobrepor a outros conteúdos próximos à direita dele. Quaisquer links ou botões à direita de "outer-center" não funcionarão. Experimente a cor de fundo para "centro externo" para entender a necessidade de "estouro: oculto"





css