Alinhar conteúdo dentro de uma div

152

Eu uso o estilo css de alinhamento de texto para alinhar o conteúdo dentro de um contêiner em HTML. Isso funciona bem enquanto o conteúdo é texto ou o navegador é o IE. Mas, caso contrário, não funciona.

Também como o nome sugere, é usado basicamente para alinhar o texto. A propriedade align foi descontinuada há muito tempo.

Existe alguma outra maneira de alinhar o conteúdo em html?

html css text-align

— Hemanshu Bhojak
fonte

Dê-nos mais informações, por favor? passado o código que não está funcionando em outros navegadores.

— 26409 Shoban

Você deve dar um exemplo de sua marcação para que as pessoas saibam o que você está tentando fazer. Caso contrário, sua pergunta é ambígua.

— levik

216

alinhar texto alinha o texto e outro conteúdo embutido. Não alinha os filhos do elemento de bloco.

Para fazer isso, você deseja dar ao elemento que deseja alinhar uma largura, com as margens esquerda e direita 'automáticas'. Essa é a maneira compatível com os padrões que funciona em qualquer lugar, exceto no IE5.x.

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

Para que isso funcione no IE6, é necessário garantir que o Modo de padrões esteja ativado usando um DOCTYPE adequado.

Se você realmente precisa oferecer suporte ao Modo IE5 / Quirks, que atualmente não deveria, é possível combinar as duas abordagens diferentes da centralização:

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

(Obviamente, os estilos devem ser colocados dentro de uma folha de estilo, mas a versão embutida é ilustrativa.)

— bobince
fonte

2

Se você não conhece a largura da div, o que geralmente ocorre, esta solução funciona perfeitamente em todos os navegadores: matthewjamestaylor.com/blog/…

— Artem Russakovskii

Eu usei <div style = "width: 100%; margin: 0 auto;"> Hello </div>

— Aamol

9

Você pode fazer 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 também mencionou, leia o artigo original de Mattew James Taylor para obter uma descrição completa.

— Mahdi
fonte

9

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

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

— krithi k
fonte

1

Embora esse trecho de código possa resolver a questão, incluir uma explicação realmente ajuda a melhorar a qualidade da sua postagem. Lembre-se de que você está respondendo à pergunta dos leitores no futuro e essas pessoas podem não saber os motivos da sua sugestão de código.

— andreas

Desculpe, código acima irá alinhar um centro div com no conteúdo pai

— k krithi

6

Honestamente, eu odeio todas as soluções que eu vi até agora, e vou lhe dizer o porquê: elas parecem nunca a alinhar corretamente ... então aqui está o que eu costumo fazer:

Eu sei quais valores de pixel cada div e suas respectivas margens mantêm ... então eu faço o seguinte.

Vou criar uma div wrapper que tem uma posição absoluta e um valor à esquerda de 50% ... então essa div agora começa no meio da tela e subtraio metade de todo o conteúdo da largura da div ... e recebo um conteúdo de redimensionamento LINDO ... e acho que isso funciona em todos os navegadores também. Experimente você mesmo (este exemplo assume que todo o conteúdo do seu site está envolvido em uma tag div que usa essa classe de wrapper e todo o conteúdo tem 200px de largura):

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

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

Isso também funciona de maneira INCRÍVEL para alinhar verticalmente seu conteúdo e usar top: 50% e margem superior. Felicidades!

— Alexandru
fonte

2

Aqui está uma técnica que eu uso que funcionou bem:

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

Expandir snippet

— Bloodhound
fonte

2

Abaixo estão os métodos que sempre funcionaram para mim

Usando o modelo de layout flexível :

Defina a exibição da div pai como display: flex;e você pode alinhar os elementos filhos dentro da div usando o justify-content: center;(para alinhar os itens no eixo principal) e align-items: center;(para alinhar os itens no eixo transversal).

Se você possui mais de um elemento filho e deseja controlar a maneira como eles são organizados (coluna / linhas), também é possível adicionar flex-directionpropriedade.

Exemplo de trabalho:

.parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  height: 250px;
  width: 250px;
}

.child {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

Expandir snippet

2. (método mais antigo) Usando posição, propriedades de margem e tamanho fixo

Exemplo de trabalho:

.parent {
  border: 1px solid black;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  border: 1px solid black;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  position: absolute;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

Expandir snippet

— nmak18
fonte

1

Todas as respostas falam sobre alinhamento horizontal.

Para alinhar verticalmente 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>

Expandir snippet

— Nicolas
fonte

-2

Apenas outro exemplo usando HTML e CSS:

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

— Diogo
fonte

27

Nada do que você escreveu é específico para o ASP.NET. É apenas HTML e CSS embutido. Você quis escrever um controle de servidor com propriedades?

— Webworm

1

Fixo. A resposta agora menciona as tecnologias corretas.

— jony