Кнопка css по центру: Как выровнять кнопку по центру используя CSS и HTML

html — Как закрепить кнопку по центру снизу

Вопрос задан 4 года 1 месяц назад

Изменён 4 года 1 месяц назад

Просмотрен 853 раза

-1

New! Save questions or answers and organize your favorite content.
Подробнее.

Есть кнопка

color: #fff;
border-radius: 4px;
border: 1px solid #f6705a;
padding: 5px 20px;

Она находится в блоке

Нужно кнопку прижать к нижней части и по центру(Контент в блоке динамичный)

Добавляю в css

position: absolute;
bottom: 25px;
right: 0;
left: 0;
text-align: center;

Получаю вот это

.bl-i {
    height: 410px;
    color: #fff;
    background: #666666;
    margin-bottom: 15px;
}
.view-e {
    position: absolute;
    bottom: 25px;
    right: 0;
    left: 0;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    border: 1px solid #f6705a;
    padding: 5px 20px;
}

<div>
  <div>
    <img src="https://bipbap. ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-220x220.jpg">
    <h5>Пруток металлический</h5>
  </div>
  <ul>
    <li><span>Круг стальной</span></li>
  </ul>
  <div>
    <a href="">Показать еще</a>
  </div>
</div>

Что я делаю не правильно?

• html
• css

8

Если я все правильно понял, то у тебя должно быть что-то вроде этого. Но тут кончено нужно осторожно играться с размерами шрифта ul-li, чтобы они не вылазили за пределы.

.block {
  display: block;
  float: left;
  margin: 10px;
  position: relative;
  height: 410px;
  width: 255px;
  color: #fff;
  background: #666666;
}

.image img {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
}

.description ul {
  margin: 0;
}

.
  more {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 5px 0;
}

.more a {
  display: inline-block;
  color: #fff;
  border-radius: 4px;
  border: 1px solid #f6705a;
  padding: 5px 20px;
}

<div>

  <div>
    <div>
      <img src="https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-220x220.jpg">
    </div>
    <div>
      <ul>
        <li>Первая строка</li>
        <li>Вторая строка</li>
        <li>Третья строка</li>
        <li>Четвертая строка</li>
        <li>Пятая строка</li>
      </ul>
    </div>
    <div>
      <a href="#">Показать еще</a>
    </div>
  </div>

  <div>
    <div>
      <img src="https://bipbap.  ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-220x220.jpg">
    </div>
    <div>
      <ul>
        <li>Первая строка</li>
        <li>Вторая строка</li>
        <li>Третья строка - очень длинная строка вы вмещающаяся в заданныую ширину</li>
      </ul>
    </div>
    <div>
      <a href="#">Показать еще</a>
    </div>
  </div>

  <div>
    <div>
      <img src="https://www.google.ru/doodle4google/images/splashes/featured.png">
    </div>
    <div>
      <ul>
        <li>Одна строка</li>
      </ul>
    </div>
    <div>
      <a href="#">Показать еще</a>
    </div>
  </div>

</div>

4

.bl-i {
    height: 410px;
    color: #fff;
    background: #666666;
    margin-bottom: 15px;
}
. view-e {
    position: absolute;
    bottom: 25px;
    left: 50%;
    margin-left: -67px;
    color: #fff;
    border-radius: 4px;
    border: 1px solid #f6705a;
    padding: 5px 20px;
}

<div>
  <div>
    <img src="https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-220x220.jpg">
    <h5>Пруток металлический</h5>
  </div>
  <ul>
    <li><span>Круг стальной</span></li>
  </ul>
  <div>
    <a href="">Показать еще</a>
  </div>
</div>

Попробуйте так, если верно понял вопрос.

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как поставить кнопку по центру css

Расположение кнопки по центру css.

Выравнивание по центру: CSS-верстка

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

Выравнивание блоков по центру

В css выровнять блок по центру легко. Это самый известный многим прием, но о нем я хотел бы рассказать именно сейчас, в первую очередь. Здесь подразумевается выравнивание по центру по горизонтали относительно родительского элемента. Как оно осуществляется? Допустим, у нас есть контейнер и в нем наш подопытный:

Предположим, что это шапка сайта. Она не тянется на всю ширину окна и нам надо ее отцентрировать. Пишем так:

width / max — width : 800px ;

Нам нужно указать точную или максимальную ширину, после чего записать ключевое свойство – margin: 0 auto. Оно задает внешние отступы нашей шапке, первое значение определяет отступы сверху и снизу, а второе – справа и слева. Значение auto дает команду браузеру автоматически рассчитать отступы с обеих сторон так, чтобы элемент был ровно по центру родительского. Удобно!

Выравнивание текста

Это тоже очень простой прием. Для выравнивания всех строчных элементов можно использовать свойство text-align и его значения: left, right, center. Последнее центрирует текст, что нам и нужно. Таким же образом можно выровнять даже картинку, потому что она тоже по умолчанию является строчным элементом.

Выравнивание текста по вертикали

А вот это уже посложнее. По умолчанию нет такого простого общеизвестного свойства, которое бы легко центрировало текст в блочной контейнере по вертикали. Однако есть несколько приемов, которые за годы работы придумали верстальщики.

Задать высоту блока с помощью внутренних отступов. Способ заключается в том, чтобы не задавать явную высоту с помощью height, а создать ее искусственно с помощью paddingов сверху и снизу, которые должны быть одинаковы. Создадим любой блок и запишем ему такие свойства:

padding : 30px 0 ;

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

Определить для блока line-height. Мне кажется, это более правильный способ, если вам надо выровнять одну строчку текста. При нем вы можете записать высоту по нормальному, с помощью свойсва height. После этого ему же нужно задать высоту строки, такую же, как и высота блока в целом.

line — height : 60px ;

Результат будет аналогичен вышеприведенной картинке. Все будет работать, даже если вы добавите внутренние отступы. Однако, только для одной строки. Если вам нужно больше текста в элементе, то данный способ работать не будет.

Преобразовать блок в ячейку таблицы. Суть этого метода в том, что для ячейки таблицы действует свойство vertical-align: middle, которое центрирует элемент по вертикали. Соответственно, в этом случае блоку нужно задать следующее:

display : table — cell ;

vertical — align : middle ;

Этот способ хорош тем, что вы сможете выровнять сколько угодно текста по центру. Но блоку, в который вложен наш div лучше прописать display: table, иначе может не работать.

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

Задать отступы в процентах. Если вы знаете высоту родительского элемента и помещаете в него еще один блочный элемент, то отцентрировать его можно с помощью процентных отступов. Например, родитель имеет высоту 600 пикселей. Вы помещаете в него блок, который имеет высоту 300 пикселей. Сколько вам нужно отступить сверху и снизу, чтобы отцентрировать его? По 150 пикселей, а это 25% от высоты родителя.

Этот способ позволяет сделать центровку только когда размеры позволяют сделать вычисления. А если у вас родитель 887 пикселей в высоту, то точно записать ничего не получится, это и так понятно.

Вставить элемент в ячейку таблицы. Опять же, если мы преобразуем родительский элемент в ячейку таблицы, то вставленный в него блок автоматом отцентрируется по вертикали. Для этого родителю всего лишь нужно задать vertical-align: middle.

А если вдобавок к этому записать еще и margin: 0 auto, то элемент и по горизонтали станет в центр!

Доброго времени суток, подписчики и читатели данной публикации. Сегодня я хочу вдаться в подробности и рассказать вам, как в css выровнять текст по центру. В некоторых предыдущих статьях я косвенно затрагивал данную тему, поэтому кое-какие знания в этой области у вас имеются.

Однако в данной публикации я расскажу вам о всевозможных способах выравнивания объектов, а также объясню, как делать отступы и красные строки в абзацах. Так что давайте приступать к изучению материала!

Html и его детища и align

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

Что касается валидации (данный термин подробно описан в статье « »), то в самой спецификации html осуждается использование , так как для валидности необходимо использовать переходной .

Выравнивание кнопки по центру

Ребят привет! Помогите! Очень помощь нужна! Сайт работает на wordpress. Есть код кнопки facebook, но я никак не могу его по центру страницы выровнить, он всега слева получается. Как мне этот код ( кнопку ) поставить по центру страницы.

<div data-href=»https://pr-cy.ru/jump/?url=https%3A%2F%2Ffacebook.com%2Funiversalika» data-layout=»box_count» data-action=»like» data-show-faces=»true» data-share=»true»></div>

а вот скрины с компа и с телефона:

» />

Как поставить кнопку по центру css

Проблема в том, что если рядом располагаются 2 кнопки, одна задана через <a>, другая через <button> (или <input type=»submit» — неважно), то текст выровненный по центру/вертикали выглядит не на одном уровне! Более сносно выглядет в хроме, в ФФ и ИЕ разъезжается. Что делать? Прочитал весь интернет, пробовал разное, но ничего не получилось!

Вот код кнопки на CSS:

Вот как оно выглядит в ФФ (см. аттач.).

1. удалить все margin. padding
2. выставить одинаковый размер шрифта и высоту строки.
3. выставить одинаковый vertical-align

После этого надписи должны расположиться на одной линии.

1. удалить все margin. padding
2. выставить одинаковый размер шрифта и высоту строки.
3. выставить одинаковый vertical-align

padding убрал. margin не было.
Добавил в css line-height: 24px;
vertical-align итак стоит миддл.
Всё равно криво.

Как расположить кнопку по центру css

Как выровнять кнопку по центру используя CSS и HTML

Чтобы расположить кнопку в центре HTML страницы, можно использовать 3 разных подхода:

• margin: auto
• div
• flexbox

Разберем их подробнее.

Как использовать margin: auto для центрирования кнопки

Первый и, возможно, самый простой вариант — добавить кнопке CSS свойство margin: 0 auto , а затем добавить display: block , чтобы сделать кнопку в центре.

margin: 0 auto — это краткая форма установки верхнего и нижнего полей в 0 и левого и правого полей на авто.

Автоматическое поле — это то, что заставляет кнопку центрироваться. Тут важно, чтобы кнопка находилась внутри блока.

Как центрировать кнопку с помощью HTML тега div

Второй вариант — обернуть кнопку тегом div , а затем использовать text-align: center для центрирования кнопки внутри этого <div> .

Как будто ты размещаешь текст по центру.

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

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

В таком случае лучше использовать первый вариант.

Короче говоря, если вы настаиваете на использовании этого подхода, сделайте это только для редких кнопок.

Как центрировать кнопку с помощью CSS flexbox

Третий вариант — использовать flexbox для центрирования кнопки.

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

Как сделать кнопку по центру?

inline-block заставляет контейнер (div в данном случае) съёжится до размеров того, что в нём находится. Таким образом text-align не годится для выравнивания содержимого внутри inline-block . Ибо ему просто некуда двигаться. Размеры-то одинаковые.

Если div шире своего содержимого, то text-align работает.
Но Ваш кнопочный div, когда он нормальный block, растягивается по длине на всю ширину страницы. Поэтому кнопка выравнивается относительно страницы и уезжает правее относительно центра текста.

Можно сузить общий контейнер для текста и кнопки с помощью того же inline-block . Он не будет шире текста (предполагаем текст шире кнопки), кнопочный div таким образом тоже по ширине будет как текст, и кнопка теперь выравнивается относительно текста.

Понадобилось правильно установить всего два свойства css. Они самые первые. Остальное для красоты, если это кому-то нравится. Правда есть ещё элемент ubasility. Кнопка работает при нажатии не только по надписи, но и по всей области кнопки. Пользователю не надо быть снайпером.

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.

css — попытка выровнять кнопку html по центру моей страницы

Asked 10 лет, 2 месяца назад

Изменено 1 год, 3 месяца назад

Просмотрено 1,0 м раз

118

Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

На этот вопрос уже есть ответы здесь

:

Как центрировать кнопку внутри div? (15 ответов)

Закрыт 3 года назад.

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

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

 
   имя моей кнопки

 

• HTML
• css
• кнопка
• выравнивание
• вертикальное выравнивание

1

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

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

 

    Кнопка

 

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

 .
  wrapper {
    выравнивание текста: по центру;
}
.кнопка {
    положение: абсолютное;
    верх: 50%;
}
 

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

9

Вы можете центрировать кнопку без использования text-align на родительском div простым использованием margin:auto; дисплей:блок;

Например:

HTML

 

  Отправить

 

CSS

 кнопка {
  поля:авто;
  дисплей:блок;
}
 

ПОСМОТРЕТЬ В ДЕЙСТВИИ: CodePen

2

Отредактировано автором: Это действительно устаревший ответ! Flexbox или grid намного лучше.

---

Недавно я действительно использовал display: table , чтобы придать вещам фиксированный размер, например, чтобы включить

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

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

 стиль
{
   дисплей: таблица;
   поле: 0 авто
}
 

JsFiddle

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

JsFiddle

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

2

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

 

 имя_кнопки

 

1

Вот решение по запросу

 mybuttonname 

1

Есть несколько способов исправить одно и то же. PFB два из них —

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

 кнопка {
   положение: фиксированное;
   слева: 50%;
   верх: 50%;
 }
 

2-й способ с использованием поля: авто

-поле: 0 авто; для горизонтального центрирования, но поле: авто; отказался работать на вертикальное центрирование… до сих пор! Но на самом деле для абсолютного центрирования требуется только объявленная высота и эти стили:

 кнопка {
  маржа: авто;
  положение: абсолютное;
  сверху: 0;
  слева: 0;
  внизу: 0;
  справа: 0;
  высота: 40 пикселей;
}
 

2

У меня это сработало с помощью flexbox.

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

 . parent {
    дисплей: гибкий;
}
 

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

 .button {
    выравнивание содержимого: по центру;
}
 

Вы должны использовать родительский div, иначе кнопка не «знает», где находится середина страницы/элемента.

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

 

    <тип кнопки="кнопка">
имя_кнопки
​
 

Вот пример: JsFiddle

2

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

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

 

<голова>
<стиль>
HTML, тело {высота: 100%;}
тело {ширина: 100%;}


<тело>
<дел>
    <тип кнопки="кнопка">
       Узнать больше