[CSS] Problema com posicionamento

[joaohenrique010 0]

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;

}
#body a {
    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;
}
#body a:hover {
	background: #2c3e50;
}

Este é o resultado (width da tela 1200px)



Este é o resultado para width menor que 430px:

 

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?

[wneo 5]

Tente float:left em #body a

[joaohenrique010 0]

Tente float:left em #body a

 

Tentei, mas aconteceu o mesmo problema já mencionado: os links perderam a centralização;

[L. Henrique 179]

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.

[joaohenrique010 0]

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á?

[wneo 5]

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.

[joaohenrique010 0]

Olá! Muito obrigado a todos que tentaram ajudar. Consegui resolver o problema ao inserir 1 <br/> a cada 2 links.