[CSS] Problema com posicionamento
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)
/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?
Discussão (6)
Carregando comentários...