Я пытаюсь выровнять кнопку HTML точно по центру страницы, независимо от используемого браузера. Он либо плавает влево, оставаясь в вертикальном центре, либо где-то на странице, как в верхней части страницы и т.д.
Я хочу, чтобы он был как вертикально, так и горизонтально, центрировался. Вот что я написал прямо сейчас:
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
mybuttonname
</button>
Вот ваше решение: JsFiddle
По сути, поместите вашу кнопку в div с центрированным текстом:
<div class="wrapper">
<button class="button">Button</button>
</div>
Со следующими стилями:
.wrapper {
text-align: center;
}
.button {
position: absolute;
top: 50%;
}
Есть много способов снять кожу с кошки, и это только один.
Вы можете text-align кнопку без использования text-align на родительском div, просто используя margin:auto; display:block; margin:auto; display:block;
Например:
HTML
<div>
<button>Submit</button>
</div>
CSS
button {
margin:auto;
display:block;
}
СМОТРИТЕ В ДЕЙСТВИИ: CodePen
Я действительно недавно использовал display: table чтобы придать вещам фиксированный размер, например, чтобы включить margin: 0 auto для работы. Сделал мою жизнь намного проще. Вам просто нужно обойти тот факт, что "табличное" отображение не означает табличный HTML.
Это особенно полезно для адаптивного дизайна, где вещи становятся просто волосатыми и сумасшедшими, 50% оставили это и -50%, которые просто становятся неуправляемыми.
style
{
display: table;
margin: 0 auto
}
Кроме того, если у вас есть две кнопки и вы хотите, чтобы они были одинаковой ширины, вам даже не нужно знать размер каждой кнопки, чтобы они были одинаковой ширины - потому что таблица волшебным образом свернет их для вас.
(это также работает, если они встроены, и вы хотите расположить две кнопки по центру - попробуйте сделать это с процентами!).
попробуйте это, это довольно просто и даст вам возможность внести изменения в ваш .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>
Вот решение по запросу
<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>Есть несколько способов исправить это. ПФБ два из них -
Первый путь с использованием позиции: фиксированная - позиция: фиксированная; позиции относительно окна просмотра, что означает, что он всегда остается на одном и том же месте, даже если страница прокручивается. Добавление левого и верхнего значения к 50% поместит его в середину экрана.
button {
position: fixed;
left: 50%;
top:50%;
}
2-й способ с использованием поля: auto -margin: 0 auto; для горизонтального центрирования, но на полях: авто; отказался работать для вертикальной центровки... до сих пор! Но на самом деле абсолютное центрирование требует только объявленной высоты и следующих стилей:
button {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 40px;
}
Для меня это работало с помощью flexbox.
Добавьте класс css вокруг родительского div/элемента с помощью:
.parent {
display: flex;
}
и для использования кнопки:
.button {
justify-content: center;
}
Вы должны использовать родительский div, иначе кнопка не "знает", что такое середина страницы/элемента.
Поместите его в другой 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
Сделайте все родительские элементы шириной 100% и высотой 100% и используйте display: table; и отобразите: table-cell ;, проверьте рабочий образец.
<!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>