Estou tentando obter uma div que tenha o position:fixed
centro alinhado na minha página.
Eu sempre fui capaz de fazê-lo com divs absolutamente posicionados usando esse "hack"
left: 50%; width: 400px; margin-left:-200px
... onde o valor da margem esquerda é metade da largura da div.
Isso não parece funcionar para divs de posição fixa, apenas os coloca com o canto mais à esquerda em 50% e ignora a declaração de margem esquerda.
Alguma idéia de como consertar isso para que eu possa alinhar os elementos posicionados fixos?
E eu colocarei um M&M bônus se você puder me dizer uma maneira melhor de centralizar o alinhamento de elementos absolutamente posicionados do que o descrito acima.
html
center
alignment
css-position
Kyle
fonte
fonte
Respostas:
A resposta de Koen não centraliza exatamente o elemento.
A maneira correta é usar a
CCS3 transform
propriedade. Embora não seja suportado em alguns navegadores antigos . E nem precisamos definir um par ou fixowidth
.Trabalhando jsfiddle comparação aqui .
fonte
left: 50%
move a div para 50% da página. Mas você deve ter em mente que o move a partir do lado esquerdo da div, portanto a div ainda não está centralizada.translate(-50%, 0)
que basicamentetranslateX(-50%)
considera a largura atual da div e a move em -50% de sua largura para o lado esquerdo do local real.Para aqueles com o mesmo problema, mas com um design responsivo, você também pode usar:
Fazer isso sempre manterá seu fixo
div
centralizado na tela, mesmo com um design responsivo.fonte
-(75/2)
nesse caso)Você também pode usar o flexbox.
fonte
<center>
qual foi preterida e usando uma técnica moderna como asdisplay: flex
propriedades associadas e algumas.No post acima, acho que a melhor maneira é
width: 100%
margin-left: auto
emargin-right: auto
, ou para a tabelaalign="center"
.Espero que isso ajude.
fonte
max-width
s para elementos de posição fixa. Você quer uma barra lateral fixa que ocupe responsavelmente 30% da suamax-width: 1200px
página da web? Isso o levará até lá.Divs normais devem usar
margin-left: auto
emargin-right: auto
, mas isso não funciona para divs fixas. A maneira de contornar isso é semelhante à resposta de Andrew , mas não usa a<center>
coisa obsoleta . Basicamente, basta dar à div fixa um wrapper.Isso centralizará uma div fixa dentro de uma div, permitindo que a div reaja com o navegador. ou seja, a div será centralizada se houver espaço suficiente, mas colidirá com a borda do navegador se não houver; semelhante a como uma div central regular reage.
fonte
Se você deseja centralizar o alinhamento de uma posição fixa div na vertical e na horizontal, use este
fonte
Isso deve fazer o mesmo.
fonte
Se você sabe que a largura é de 400 px, seria a maneira mais fácil de fazer isso, eu acho.
fonte
Isso funciona se você deseja que o elemento se espalhe pela página como outra barra de navegação.
width: calc (width: 100% - width, o que mais estiver fora do centro)
Por exemplo, se sua barra de navegação lateral for 200px:
largura: calc (100% - 200px);
fonte
É bastante fácil usar largura: 70%; esquerda: 15%;
Define a largura do elemento para 70% da janela e deixa 15% nos dois lados
fonte
Usei o seguinte com o Twitter Bootstrap (v3)
Ou seja, faça um elemento de largura total que seja posição fixa e, apenas empurre um contêiner nele, o contêiner será centralizado em relação à largura total. Também deve se comportar bem responsivamente.
fonte
Uma solução usando caixa flexível; totalmente responsivo:
fonte
se você não quiser usar o método wrapper. então você pode fazer isso:
fonte