Alinhar o conteúdo dentro de uma div

StackOverflow https://stackoverflow.com/questions/684634

  •  22-08-2019
  •  | 
  •  

Pergunta

Eu uso o estilo css text-align para Alinhar o conteúdo dentro de um recipiente em HTML. Esta multa funciona enquanto o conteúdo é texto ou o navegador é IE. Mas caso contrário, não funciona.

Além disso, como o nome sugere, é usado basicamente para texto align. A propriedade align foi substituído há muito tempo.

Existe alguma outra maneira de Alinhar o conteúdo de html?

Foi útil?

Solução

text-align Alinha o texto e outros conteúdos em linha. Ele não elemento de bloco align crianças.

Para fazer isso, você quer dar o elemento que deseja alinhadas uma largura, com ‘auto’ margens esquerda e direita. Esta é a maneira compatível com os padrões que funciona em todos os lugares, exceto IE5.x. 

<div style="width: 50%; margin: 0 auto;">Hello</div>

Para que isso funcione no IE6, você precisa ter certeza Modo de Padrões está usando um DOCTYPE adequado.

Se você realmente precisa para apoiar IE5 Mode / Quirks, que hoje em dia você não deve realmente, é possível combinar as duas abordagens diferentes para centralização: 

<div style="text-align: center">
    <div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>

(Obviamente, os estilos são melhor colocada dentro de uma folha de estilo, mas a versão em linha é ilustrativa.)

Outras dicas

Você pode fazê-lo assim também:

HTML 

<body>
    <div id="wrapper_1">
        <div id="container_1"></div>
    </div>
</body>

CSS 

body { width: 100%; margin: 0; padding: 0; overflow: hidden; }

#wrapper_1 { clear: left; float: left; position: relative; left: 50%; }

#container_1 { display: block; float: left; position: relative; right: 50%; }

Como Artem Russakovskii mencionou também, leia o artigo original de Mattew James Taylor para descrição completa. 

<div class="content">Hello</div>

.content {
    margin-top:auto;
    margin-bottom:auto;
    text-align:center;
}

Honestamente, eu odeio todas as soluções que eu vi até agora, e eu vou dizer porquê: Eles simplesmente não parecem sempre alinhá-lo direito ... então aqui está o que eu costumo fazer:

Eu sei o que pixels valoriza cada div e suas respectivas margens de segurar ... então eu faço o seguinte.

Eu vou criar uma div wrapper que tem uma posição absoluta e um valor esquerdo de 50% ... assim que este div agora começa no meio da tela, e então eu subtrair metade de todo o conteúdo da largura da div ... e eu fico BEAUTIFULLY escalar conteúdo ... e acho que isso funciona em todos os navegadores, também. Tente você mesmo (este exemplo assume que todo o conteúdo do seu site é envolto em uma tag div que utiliza esta classe de mensagens publicitárias e todo o conteúdo é 200px de largura): 

.wrapper {
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

EDIT: eu esqueci de acrescentar ... você também pode querer definir width: 0px; neste div wrapper para alguns navegadores para não mostrar as barras de rolagem, e então você pode usar o posicionamento absoluto para todos os divs internos.

Isso também funciona incrível para alinhar verticalmente o seu conteúdo, bem usando top: 50% e margin-top. Felicidades!

Aqui está uma utilização técnica que eu que tem funcionado bem: 

<div>
    <div style="display: table-cell; width: 100%">&nbsp;</div>
    <div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>

Todas as respostas falar sobre align horizontal.

Para verticais alinhamento vários elementos de conteúdo, dê uma olhada nesta abordagem: 

<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
    <div>
        <p>Paragraph #1</p>
        <p>Paragraph #2</p>
    </div>
</div>

Apenas um outro exemplo usando HTML e CSS: 

<div style="width: Auto; margin: 0 auto;">Hello</div>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top