Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Esse é o código HTML:
<div id="body">
<a href="">Biologia 1</a>
<a href="">Biologia 2</a>
<a href="">Filosofia</a>
<a href="">Física 1</a>
<a href="">Física 2</a>
<a href="">Geografia</a>
<a href="">História</a>
<a href="">História da Arte</a>
<a href="">Inglês</a>
<a href="">Literatura</a>
<a href="">Matemática 1</a>
<a href="">Matemática 2</a>
<a href="">Português</a>
<a href="">Química 1</a>
<a href="">Química 2</a>
<a href="">Sociologia</a>
</div>Esse é o código CSS:
#body {
position: relative;
top: 125px;
padding: 30px;
text-align: center;
} text-decoration: none;
display: inline-block;
text-align: center;
width: 140px;
font-size: 20px;
padding: 10px;
border-radius: 2px;
color: white;
background: #34495e;
font-weight: bold;
box-shadow: 0px 1px 4px #888888;
transition: 0.2s ease-out;
} background: #2c3e50;
}Este é o resultado (width da tela 1200px)
/applications/core/interface/imageproxy/imageproxy.php?img=http://s7.postimg.org/dar42x49n/image.png&key=657d2bbc2277a04770b36f22df368d4bd17801a3d9957a030574292e8a9310f1" alt="image.png" />
Este é o resultado para width menor que 430px:
/applications/core/interface/imageproxy/imageproxy.php?img=http://s7.postimg.org/hl5ryi9cr/image.png&key=3543f181c9b479e50e3bed1da495625484553fa0cf7de59c89c4750ed9be6caf" alt="image.png" />
O problema é que, na segunda foto, visivelmente, Química 2 e Sociologia estão desalinhados.
Quando, no CSS, em #body, retirei o "text-align:center;", tudo ficou alinhado certinho, mas preciso desse alinhamento para que o site continue responsivo (o site está sendo feito alinhado ao centro).
Como resolvo isso SEM retirar o text-align: center?
Tente float:left em #body a
Tentei, mas aconteceu o mesmo problema já mencionado: os links perderam a centralização;
Você pode tentar um RTA (Recurso Tecnológico Alternativo) ou para os populares "Gambiarra". Siga o exemplo abaixo:
@media screen and (max-width: 768px) {
.suaclasse a:nth-child(15), .suaclasse a:nth-child(16) {
/ Aqui você negativa a margem esquerda Ex: margin: 0 -5px 0px 0px; /
}
}
O nth-child(15) nada mais faz do que selecionar o 15º elemento daquele conjunto dentro da classe pai e fornecer a ele a propriedade CSS que você escrever.
>
Você pode tentar um RTA (Recurso Tecnológico Alternativo) ou para os populares "Gambiarra". Siga o exemplo abaixo:
@media screen and (max-width: 768px) {
.suaclasse a:nth-child(15), .suaclasse a:nth-child(16) {
/ Aqui você negativa a margem esquerda Ex: margin: 0 -5px 0px 0px; /
}
}
O nth-child(15) nada mais faz do que selecionar o 15º elemento daquele conjunto dentro da classe pai e fornecer a ele a propriedade CSS que você escrever.
>
Você pode tentar um RTA (Recurso Tecnológico Alternativo) ou para os populares "Gambiarra". Siga o exemplo abaixo:
@media screen and (max-width: 768px) {
.suaclasse a:nth-child(15), .suaclasse a:nth-child(16) {
/ Aqui você negativa a margem esquerda Ex: margin: 0 -5px 0px 0px; /
}
}
O nth-child(15) nada mais faz do que selecionar o 15º elemento daquele conjunto dentro da classe pai e fornecer a ele a propriedade CSS que você escrever.
Obrigado pela ajuda, mas não deu certo, pois em outras dimensões (width & height) as coisas se desorganizaram.
Do jeito que está, sem o float left, fica desalinhado no Chrome mas fica tudo certinho no Mozilla Firefox. O que será?
Você pode resolver da seguinte forma:
1 - Em body, nesse caso o elemento body do html e não em seu id, use text-align:center;
2 - Em seu id #body, use display:inline-block e defina um tamanho de largura conforme desejado.
*Obs: Crie um novo arquivo e coloque somente essas propriedades para não se confundir com os valores que vc já fez, recomece, é a melhor forma de aprender.
Olá! Muito obrigado a todos que tentaram ajudar. Consegui resolver o problema ao inserir 1 <br/> a cada 2 links.
Tente float:left em #body a