Вопрос по vertical-alignment, html, alignment, button – пытаясь выровнять кнопку HTML в центре моей страницы

79

Я пытаюсь выровнять кнопку HTML точно по центру страницы, независимо от используемого браузера. Он либо плавает влево, оставаясь в вертикальном центре, либо где-то на странице, как в верхней части страницы и т. Д.

Я хочу, чтобы он был как вертикально, так и горизонтально, центрировался. Вот что я написал прямо сейчас:

<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
   mybuttonname
</button> 

Ваш Ответ

9   ответов
118

Вот ваше решение:JsFiddle

По сути, поместите вашу кнопку в div с центрированным текстом:

<div class="wrapper">
    <button class="button">Button</button>
</div>

Со следующими стилями:

.wrapper {
    text-align: center;
}

.button {
    position: absolute;
    top: 50%;
}

Есть много способов снять кожу с кошки, и это только один.

Привет, IE отображает его в крайнем левом углу, но все еще находится в вертикальном центре. Но когда я использую ваш код в моем файле, он встроенный, он прекрасно отображается на моей странице. Сегодня вечером мне тоже придется проверить с другими браузерами. Спасибо user1455116
здесь я не могу использовать отдельный файл CSS. На самом деле это XSL-файл, в который встроен HTML-код. Отображается только одна кнопка, так как это небольшой тест, чтобы увидеть, как выглядит кнопка. Следовательно, я не могу создать другой файл CSS. Если я создаю другой файл CSS для этой кнопки, то мне нужен файл XML, XSL и CSS для этой простой функциональности. Я буду использовать отдельный CSS для будущих функций, которые являются user1455116
@AshwinG, вы не можете центрироватьbutton элемент без обертки. Единственный способ заключается в использованииbody как обертка. Это означает, что все центрировано. Если вам нужны нецентрированные элементы, вам придется предоставить элементы-обертки для них. Я не думаю, что дополнительный div хуже, чем применение пользовательских правил для навигации и других элементов страницы, которые в противном случае были бы затронуты.
Посмотрите мое редактирование и эту скрипку: вы должны быть в состоянии захватить этот CSS и поместить его в строку:jsfiddle.net/7Laf8
Убедитесь, что никакой другой CSS не мешает ему. Это может быть проблемой! Добро пожаловать!
4

Вот решение, как спросили

<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>

48

text-align на родителяdiv простым использованиемmargin:auto; display:block;

Например:

HTML

<div>
  <button>Submit</button>
</div>

CSS

button{
  margin:auto;
  display:block;
}

SEE IT IN ACTION: CodePen

4

попробуйте это довольно просто, и вы не можете внести изменения в ваш файл .css, это должно работать

<p align="center">
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> mybuttonname</button>
</p>
Я уже пробовал это, это зависит от браузера, не отображается должным образом в IE, вероятно, потому что margin-right: auto и margin-left: auto не понимаются должным образом IE user1455116
1

Поместите его в другой div, используйте CSS, чтобы переместить кнопку в середину:

<div style="width:100%;height:100%;position:absolute;vertical-align:middle;text-align:center;">
    <button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
mybuttonname</button> 
</div>​

Вот пример:JsFiddle

Это зависит от браузера, который вы используете. Я заметил, что IE не относится к вещам margin-left и margin-right, поэтому для центрирования используйте text-align: center; на div, чтобы исправить это для IE.
привет, я видел в окне результатов, кнопка находится в крайнем левом углу и находится в вертикальной середине страницы, разве это не то, что вы видите? user1455116
2

Для меня это работало с использованием flexbox.

Добавьте класс css вокруг родительского элемента div / с помощью:

.parent {
    display: flex;
}

и для использования кнопки:

.button {
    justify-content: center;
}

Вы должны использовать родительский div, в противном случае кнопка не "знает". что такое середина страницы / элемента.

2

Есть несколько способов исправить это. ПФБ два из них -

1st Way using position: fixed - положение: фиксированное; позиции относительно окна просмотра, что означает, что он всегда остается на одном и том же месте, даже если страница прокручивается. Добавление левого и верхнего значения к 50% поместит его в середину экрана.

 button {
   position: fixed;
   left: 50%;
   top:50%;
 }

2nd Way using margin: auto маржа: 0 авто; для горизонтального центрирования, но на полях: авто; отказался работать для вертикального центрирования & # x2026; до сих пор! Но на самом деле абсолютное центрирование требует только объявленной высоты и следующих стилей:

button {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 40px;
}
Хотя этот код может ответить на вопрос, предоставляя дополнительный контекст относительноhow и / илиwhy это решает проблему, улучшая долгосрочную ценность ответа.
Привет @ Dav & # x456; надеюсь, что обновленный ответ поможет с дополнительным контекстом. ура
15

Я действительно недавно взялdisplay: table придать вещам фиксированный размер, например включитьmargin: 0 auto работать. Сделал мою жизнь намного проще. Вам просто нужно пройти мимо того факта, что «таблица» отображение не означает html таблицы.

Это особенно полезно для адаптивного дизайна, где вещи становятся просто волосатыми и сумасшедшими, 50% оставляют это и -50%, которые просто становятся неуправляемыми.

style
{
   display: table;
   margin: 0 auto
}

JsFiddle

Кроме того, если у вас есть две кнопки и вы хотите, чтобы они имели одинаковую ширину, вам даже не нужно знать размер каждой кнопки, чтобы они были одинаковой ширины - потому что таблица волшебным образом свернет их для вас.

enter image description here

JsFiddle

(это также работает, если они встроены, и вы хотите расположить две кнопки по центру - попробуйте сделать это с процентами!).

0

Сделайте все родительские элементы со 100% шириной и 100% высотой и используйтеdisplay: table; а такжеdisplay:table-cell;Проверьте рабочий образец.

Рабочая версия Git

<!DOCTYPE html>
<html>
<head>
<style>
html,body{height: 100%;}
body{width: 100%;}
</style>
</head>
<body style="display: table; background-color: #ff0000; ">

<div style="display: table-cell; vertical-align: middle; text-align: center;">
    <button type="button" style="text-align: center;" class="btn btn-info">
       Discover More
    </button>
</div>

</body>
</html>

Похожие вопросы