У меня есть div, ширина которого составляет 100%.
Я бы хотел разместить в нем кнопку, как я могу это сделать?
<div style="width:100%; height:100%; border: 1px solid">
<button type="button">hello</button>
</div>
У меня есть div, ширина которого составляет 100%.
Я бы хотел разместить в нем кнопку, как я могу это сделать?
<div style="width:100%; height:100%; border: 1px solid">
<button type="button">hello</button>
</div>
Ответы:
Обновленный ответ
Обновление, потому что я заметил, что это активный ответ, однако Flexbox теперь будет правильным подходом.
Live Demo
Вертикальное и горизонтальное выравнивание.
Просто по горизонтали (до тех пор, пока основная ось сгиба горизонтальна, что по умолчанию)
Исходный ответ с фиксированной шириной и без флексбокса
Если оригинальный постер требует вертикального и центрирующего выравнивания, достаточно просто при фиксированной ширине и высоте кнопки, попробуйте следующее
Live Demo
CSS
для только горизонтального выравнивания используйте либо
или
источник
Вы можете просто сделать:
Или вы можете сделать это так:
Первый будет выравнивать по центру все внутри div. Другой будет выравнивать по центру только кнопку.
источник
и вуаля:
Обновление : если OP ищет горизонтальный и вертикальный центр, этот ответ сделает это для элемента фиксированной ширины / высоты.
источник
Маржа: 0 авто; правильный ответ только для горизонтального центрирования. Для центрирования обоих способов что-то вроде этого будет работать, используя jquery:
Обновление ... пять лет спустя можно использовать flexbox на родительском элементе DIV, чтобы легко центрировать кнопку как по горизонтали, так и по вертикали.
Включая все браузерные префиксы, для лучшей поддержки
Показать фрагмент кода
источник
С предоставленной ограниченной детализацией я приму наиболее простую ситуацию и скажу, что вы можете использовать
text-align: center
:http://jsfiddle.net/pMxty/
источник
Использование flexbox
И затем добавление класса к вашей кнопке.
источник
Вы должны принять это просто здесь вы идете:
сначала у вас есть начальная позиция вашего текста или кнопки:
Добавив эту строку кода CSS в тег h2 или в тег div, который содержит тег кнопки
Окончательно Код результата будет:
источник
Наткнулся на это и подумал, что я оставлю и то решение, которое я использовал, которое использует
line-height
иtext-align: center
для вертикальной, и для горизонтальной центровки:Нажмите здесь для работы JSFiddle
источник
Для центрирования по
<button type = "button">
вертикали и по горизонтали в пределах,<div>
ширина которых вычисляется динамически, как в вашем случае, это то, что нужно сделать:text-align: center;
на обертку<div>
: это будет центрировать кнопку всякий раз, когда вы изменяете размер<div>
(или, вернее, окно)Для вертикального выравнивания вам нужно будет установить
margin: valuepx;
для кнопки. Это правило о том, как рассчитатьvaluepx
:valuepx = (wrappingDIVheight - buttonHeight)/2
Вот демонстрация JS Bin .
источник
Очень простой ответ, который будет применяться в большинстве случаев, - просто установить поле
0 auto
и установить отображениеblock
. Вы можете увидеть, как я центрировал свою кнопку в моей демонстрации на CodePenисточник
Проще всего ввести его как "div", присвоив ему "margin: 0 auto", но если вы хотите, чтобы он был отцентрирован, вам нужно указать его ширину.
источник
Опция Отзывчивый CSS для центрирования кнопки по вертикали и горизонтали, не заботясь о размере родительского элемента (используя ловушки атрибутов данных для ясности и разделения) :
HTML
CSS
Скрипка: https://jsfiddle.net/crrollyson/zebo1z8f/
источник
Отзывчивый способ центрировать вашу кнопку в div:
источник
Предположим, что div это #div, а кнопка #button:
Затем вложите кнопку в div как обычно.
источник