Como posso centro de alguma coisa, se eu não sei de antemão o que a largura é?

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

  •  12-09-2019
  •  | 
  •  

Pergunta

Eu estou tentando centralizar um tag parágrafo com algum texto nele dentro de uma div, mas eu não posso parecer para centralizá-la usando margin: 0 auto sem ter que especificar uma largura fixa para o parágrafo. Eu não quero especificar uma largura fixa, porque vou ter de texto dinâmico que entra a marca de parágrafo e será sempre uma largura diferente com base na quantidade de texto que é.

Alguém sabe como eu pode centralizar a marca de parágrafo dentro do div sem ter que especificar uma largura fixa para o parágrafo ou sem o uso de tabelas?

Foi útil?

Solução

Aqui está como fazê-lo usando uma folha de estilo.

Style Sheet: 

div.center-content
{
    text-align: center;
}

div.center-content p
{
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

HTML: 

<div class="center-content">
    <p>Lorem ipsum dolor sit amet</p>
</div>

Outras dicas

Além de "text-align" propriedade

para centrar elementos dentro de elementos de bloco, como div

uso css como 

 margin:auto

algo como o que é afixado abaixo

Quando verticalmente-centragem, a sua melhor usar Tabelas (isto na maioria dos casos, é o único a solução compatível cross-browser)

Você pode usar 

 "text-align:center"  

 "vertical-align:middle"

Eu acho que o melhor método é para conter o elemento em um elemento de nível de bloco e fazer: 

.innerElement {margin:0 auto}

Dado que ambos são elementos de nível de bloco que não têm o parâmetro float, ele deve funcionar ótimo!

aqui uma boa solução para centralizar uma div sem largura.

é tableless e está trabalhando em qualquer navegador!

Tente isto usando CSS in-line: 

<p style="text-align: center;">Lorem ipsum dolor sit amet</p>

Ou usando apenas HTML 

<p align="center">Lorem ipsum dolor sit amet</p>

Se o div definiu largura All You Need Is

.myDiv {text-align: center; }

Também ouvir o comentário de Garry. sob nenhuma circunstância usar css em linha.

Também uma outra correção sujo para este caso que você tem outras coisas na div ao centro:

Você pode sempre:

$ ( 'youParagraph ou .otherContent ') embrulhar ('');.

Obviamente não praticar este se você trabalha dentro de uma grande equipe e separação de interesses é um problema.

Espero que isso ajudou.

Eh, margens de auto precisa largura definida já que por padrão elemento nível de bloco, como

iria expandir em toda a largura disponível.

Se você não está apoiando IE <8 você pode apenas definir {display: table; margin: 0 auto; }

Caso contrário, se o seu elemento é cercada por elementos nível de bloco, você poderia fazer p {display: inline-block; } P {display: inline; } Html> / ** / body p {display: inline-block; } (Duas últimas regras são para IE e redefinir correção IE para navegadores sãs) depois disso, aplicar {text-align: center; } No recipiente.

Como alguém já mencionadas, consulte http://haslayout.net/css-tuts/Horizontal -Centering para mais informações.

Felicidades! Zoffix Znet

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top