Center Align CSS Button
This tutorial explains how to center the CSS button.
CSS Center Button
The main aim of CSS (Cascading Style Sheets) is to provide the best style for an HTML web page. Using CSS you can specify the arrangement of all the elements of the page. You can align elements both horizontally and vertically. A CSS button needs to be centre aligned if you want it to be centrally positioned within a div or at the centre of the web page.
You can Center Align CSS Button using the following method:
1. By placing a text-align property of body tag to the center (text-align: center)
In this example, we are using `text-align` center property on the <body> tag, so everything inside the <body> tag will be center-aligned automatically.
2. By setting text-align property of parent div tag to the center (text-align: center)
In this example below, we are using `text-align` center property on <div> tag with a class ( button-container-div ) so everything inside this <div> will be center-aligned automatically.
3. Center CSS Button by using margin auto (margin: auto)
In this example, we are using the `margin` auto property. Margin auto moves the div to the center of the screen.
4. Center CSS Button using Position fixed
In this example, we are giving a 50% margin from the left side of the page, and then we are taking the position: fixed so it will adjust the position on the center of the body.
4. By setting display property to flex (display: flex)
In this example we are using `display` flex property, `justify-content` and `align-items` to the parent <div> tag with class (button-container-div). The button inside <div> will take place in the center of vertical and horizontal position.
- Display flex will move it to the center vertically.
- Justify-content will move the button to the center horizontally.
- Align-items center keeps it in the center; otherwise, it will start from the div and go at the bottom of the div.
3. By setting the display property to the grid (display: grid)
In this example, we are using `display` grid property on the <div> tag with class ( button-container-div ). The button inside <div> will take place in the center of vertical and horizontal positions.
попытка выровнять html-кнопку в центре моей страницы
Я пытаюсь выровнять кнопку HTML точно в центре страницы, независимо от используемого браузера. Он либо плывет влево, все еще находясь в вертикальном центре, либо находится где-то на странице, как в верхней части страницы и т. д..
Я хочу, чтобы он был как вертикально, так и горизонтально центрирован. Вот что я написал прямо сейчас:—2—>
8 ответов
в основном, поместите кнопку в div с центрированным текстом:
со следующими стилями:
есть много способов освежевать кошку, и это только один.
вы можете центрировать кнопку без использования text-align на родительском div С помощью margin:auto; display:block;
HTML-код
в CSS
Я действительно недавно display: table чтобы дать вещам фиксированный размер, например, чтобы включить margin: 0 auto на работу. Сделал мою жизнь намного проще. Вам просто нужно пройти мимо того факта, что отображение «таблица» не означает таблицу html.
Это особенно полезно для адаптивного дизайна, где вещи просто становятся волосатыми и сумасшедшими, 50% оставили это и -50%, которые просто становятся неуправляемыми.
кроме того, если у вас есть два кнопки, и вы хотите, чтобы они были одинаковой ширины, вам даже не нужно знать размер каждого, чтобы они были одинаковой ширины-потому что таблица волшебным образом свернет их для вас.
(Это также работает, если они встроены, и вы хотите центрировать две кнопки из стороны в сторону — попробуйте сделать это с процентами!).