Почему эта кнопка не выровнена?

CSS:Почему эта кнопка не выровнена?

.button { 

    color: black; 
    background: lightblue; 
    text-align: center; 
    font-weight: bold; 
    border: 1px solid blue; 
} 

.button:hover { 
    color: #FFF; 
    background: green; 
}

HTML:

<button class="button" type="submit" value="Submit"/>Submit</button>

Я пытаюсь выровнять button к центру, но это не происходит. Это потому, что я использовал class или что?

Я бы предпочел не использовать класс, но я попробовал это, и он тоже не сработает, поэтому я просто застрял с классом, так как узнал, что смогу сделать с ним hover.

Не могли бы вы также объяснить, почему я использовал бы type и value внутри button? Я нашел пример кода вроде этого, и я скопировал его, но я не уверен, как это работает.

источник

2015-03-18 Roger

У нас нет достаточно HTML и CSS контекст. Что вы хотите, чтобы кнопка была в центре? –

Просто в центре экрана. Это все, что мне нужно. – Roger

[Документация '

Я бы просто конвертировал кнопку в элемент блока с помощью display:block. Чтобы я мог использовать маржу собственности на нее, поставить ее в центр. Длинные и короткие, поместите эти строки в код .button css.

display:block; 
margin:auto;

Вот результат https://jsfiddle.net/p1q3xy00/14/

Я действительно понятия не имею, почему, черт возьми, кто-то будет использовать значение и тип атрибутов внутри кнопки тегов. Фактически они используются в значении , чтобы указать свойства элемента.Например, значение действует как заполнитель, а тип определяет формат ввода. Это может быть флажок, адрес электронной почты, пароль, текст, дата, цвет и т.д.

источник

2015-03-18 16:40:20 YourFriend

Спасибо! это лучший ответ, который я получил! Ваша помощь приветствуется, я тоже думал о ценности и типе. :) – Roger

Если вы хотите, чтобы выровнять кнопку в центр страницы, вы можете добавить обертку вокруг него и в центре его там

.button { 
 
    color: black; 
 
    background: lightblue; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    border: 1px solid blue; 
 
} 
 

 
.button:hover { 
 
    color: #FFF; 
 
    background: green; 
 
} 
 
.wrapper { 
 
    text-align:center; 
 
}

<div class="wrapper"> 
 
    <button class="button" type="submit" value="Submit"/>Submit</button> 
 
<div>

источник

2015-03-18 16:34:37

Должна ли она называться «оберткой» для ее работы? – Roger

OK! Это сработало! спасибо за помощь! ~ – Roger

@roger Нет, его не нужно называть «оберткой». Я использовал имя для make clear, это только тег обертки. Вы можете назвать класс чем-то вроде «center-content» ... но это полностью зависит от вас. –

обернуть кнопку с сНом теге и обеспечить выравнивание с div.

<div style="text-align:center"> 
    <button class="button" type="submit" value="Submit"/>Submit</button> 
</div>

Там три типа для ввода кнопки

кнопку: просто кнопку и не привести к возникновению каких-либо событий. Таким образом, вы должны будете предоставлять события самостоятельно.

submit: отправляет форму, с которой она связана.

reset: очищает поля в форме, к которой он относится.

источник

2015-03-18 16:34:47 ksg30111992

ОК, спасибо, это здорово! благодаря! – Roger

Вы можете просто добавить text-align:center к родительскому элементу

body { 
 
    text-align: center; 
 
} 
 
.button { 
 
    color: black; 
 
    background: lightblue; 
 
    font-weight: bold; 
 
    border: 1px solid blue; 
 
} 
 
.button:hover { 
 
    color: #FFF; 
 
    background: green; 
 
}

<button class="button" type="submit" value="Submit" />Submit</button>

источник

2015-03-18 16:35:35

Добавить display: block; margin: 0 auto; в .button сделать это в качестве элемента блока.

источник

2015-03-18 16:35:38

display: block Добавить в .button так, что он может распознать margin

источник

2015-03-18 16:48:35

Почему эта кнопка не выровнена?

ответ

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