2013-05-25 2 views
3

По какой-то причине кнопки на странице, над которой я работаю, не будут центрироваться.Мои кнопки не будут центрировать

Вот что я получил в HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <link type="text/css" rel="stylesheet" href="chaos.css"/> 
    <script type="text/javascript" src="jquery-1.10.0.min.js"></script> 
    <script type="text/javascript" src="Chaos.js"></script> 
    <title>MTG Chaos Roller</title> 
</head> 
<body> 
    <div class="button"> 
     <input type="submit" value="Roll Chaos"> 
     <input type="submit" value="Roll EnchantWorldLand"> 
     <input type="submit" value="Roll PersonaLand"> 
     <input type="submit" value="Roll WackyLand"> 
    </div> 

</body> 
</html> 

CSS:

body { 
    background-color: black; 
    }; 

.button { 
    text-align: center; 
}; 

я не знаю. Кажется, он работает над чужими вещами. Я уверен, что это станет ясно, как только будет объяснено, что я делаю неправильно.

ответ

3

У вас неправильный CSS. Вам не нужно прерывать CSS с помощью запятой (;).

Используйте это. Demo

body { 
    background-color: black; 
    } 

.button { 
    text-align: center; 
} 
+0

Всё! Я приму свой ответ, как только смогу. – Sharpevil

+0

@Sharpevil - Я думаю, вы не хотите, чтобы ваши кнопки на странице были затем центрированы, но вы хотите, чтобы текст внутри кнопок находился в центре, это нечеткая формулировка в вашем вопросе :) –

+0

@ user1846192: Этот 'div' с классом '.button' обертывает в нем четыре кнопки. Он будет центрировать их, а не центрировать контент на всей странице. –

2

Try:

body { 
    background-color: black; 
    text-align: center; 
} 

В настоящее время вы настраиваете кнопки для центрирования текста внутри них, когда вы меняете его выше, вы обеспечиваете, что элементы на странице будут сосредоточены.

Смежные вопросы