necessidade de ajuda CSS centralização com posicionamento absoluto
https://stackoverflow.com/questions/1034449
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu nunca foram totalmente satisfeito com minhas várias soluções para centralização de conteúdo em uma página da web. a tag <center> foi substituído volta no meio do século 18, mas não vejo uma alternativa razoável. Especificamente o que eu quero é ter um pai DIV que está centrada, mas cujas superior esquerdo canto eu posso definir as coisas "absolutamente".
Existe uma maneira de fazer isso sem usar window.onresize javascript que volta a medir tudo? Parece uma idéia bastante para a frente ... Eu quero coisas posicionados absolutamente, eu só quero coordenada 0,0 para ser relativo a algo que não seja o canto esquerdo superior da janela do navegador.
Agora, o que eu faço é definir uma div para centrar o seu conteúdo e, em seguida, em torno de macarrão com posicionamento relativo, mas isso é muito cansativo porque os objetos relativos manter empurrando uns aos outros em torno de maneiras que eu totalmente não quer.
Todas e quaisquer pensamentos sobre este assunto muito apreciada.
Solução
É isso que você está procurando?
<div style=" position: absolute;
display: inline-block;
top: 20%;
bottom: 20%;
right: 20%;
left: 20%;
background-color: #434154;
text-align: center;">
<div style="display: inline-block;
height: 100%;
vertical-align: middle;"></div>
<div style="position: relative;
color: #FFFFFF;
background-color: #546354;
display: inline-block;
vertical-align: middle;">
THIS IS CENTERED WITHOUT SCRIPTING :D
</div>
</div>
Outras dicas
body { text-align: center; }
#wrapper { width: 960px; margin: 0 auto; text-align: left; position: relative; }
#wrapper .child { position: absolute; left: 0; top: 0; }
Apenas exemplo de código, mas qualquer elemento .child seria em 0,0 da embalagem
Qualquer elemento posicionado de forma absoluta será absolutamente posição a ele de mais próximo pai posição-relativa. Se um elemento não tem um pai com posição relativa, ele só usa o documento. Abaixo está um exemplo sem classes (um pouco de cor e estilos de largura adicionados para maior clareza).
<html>
<body style="text-align: center;">
<div style="position: relative; width: 100px; height: 100px; margin: 0 auto; background: red;">
<div style="position: absolute; left: 0; top: 0;">
This will absolutely position relative to the container div.
</div>
</div>
<div style="position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: blue;">
This will absolutely position relative to the document
</div>
</body>
</html>
Se você está furando com position: absolute; seguida, definir o div que você quer que as coisas posicionado contra a ter position: relative; para torná-lo no contexto de posicionamento para qualquer elemento filho.
Para centralizar uma div posicionado absolutamente que você precisa saber a sua largura, em seguida, usar o seguinte CSS:
#wrapper {
width: 800px;
margin: 0 auto;
position: relative; /* creates a positioning context for child elements */
}
#child {
position: absolute;
width: 400px;
left: 50%;
margin-left: -200px;
}
E o HTML:
<div id="wrapper">
<div id="child">
....
</div>
</div>
Você pode ajustar a largura ea margem esquerda como você precisar dele (o negativo margem esquerda deve ser a metade da largura da div que você está centrando por exemplo. #child.
Como outras pessoas mencionados usando margin: 0 auto; em um elemento com um conjunto de largura, ele irá centralizá-lo.
I boa maneira de coisas centro é usar o "margin: auto" tag css. Isso funciona no FF e Safari. Basta dar uma div alguma largura e uma auto margem, e se o pai é largura de 100%, então este div vai centrar alinhar-se.
Para que isso funcione no IE, você tem que usar o text-align: atributo central do pai e, em seguida, text-align esquerda na div real centrado
.AFAIK, não há nenhuma maneira de mudar as coordenadas absolutas de 0,0 para algum outro ponto Arbit. Relativa é o caminho a percorrer.
talvez eu não entendia a tarefa, mas eu acho que você pode usar
margin: 0 auto;
para centrar suas divs
Use o posicionamento relativo no pai e dar esse mesmo elemento da propriedade:
margin: 0 auto;
O pai está agora posicionado e você deve ser capaz de Ajuste elementos absolutamente dentro dela.
Exemplo:
div#page{
position:relative;
width:400px;
margin:0 auto;
}
div#page #absoluteExample{
position:absolute;
top:18px;
left:100px;
}
A maneira mais fácil:
#element {
position: absolute; /*Absolute Position*/
top: 0;
left: 0; /*Set the 4 coordinates to zero*/
bottom: 0;
right: 0;
margin: auto; /*Margin to Auto*/
height: 150px; /*Set the Height and Width*/
width:150px;
background:green; /* Backgroung:optional*/
}
Isto irá levá-lo à direita no meio, não importa o seu tamanho.
Espero que ajude!
Veja Fiddle: http://jsfiddle.net/kfPC6/
Você não quer posicionamento relativo se 0,0 vai ser relativo a um div?
A propriedade text-align: center; faz o que <center> utilizado para e é muito superior a ele.
A única coisa que é, é um pouco mais complexo de usar. Uma vez que você pegar o jeito dele, você vai saber porque você estava tendo tantos problemas antes!
Você deve usá-lo em coordenação com as propriedades de outros elementos na página. Essa é a questão desenvolvedores / designers têm com CSS e HTML tecnologias mais recentes. Isso nos dá uma poderosa forma de apresentar os nossos elementos de página, mas torna muito mais complexo e rigoroso.
A resposta de Mike Robinson certamente resolve o problema que você está tendo aqui e é um grande exemplo. Mas ...
Eu não acho que qualquer uma resposta irá mostrar-lhe como usar text-align corretamente para todos os casos, você vai se deparar, mas tentar olhar em como o posicionamento em CSS funciona mais aprofundada.
