Как расположить 2 элемента друг под другом по центру экрана?

@Vlad10 · Регистрация: 12.06.2011

Студворк — интернет-сервис помощи студентам

Есть 1 input и 1 button. Хочу расположить ровно в центре страницы друг под другом, но по нормальному не получается, всё съезжает =(

@Na1n · 31.07.2013, 11:04

HTML5
1
2
3
4
<center>
<input type="" name="inp">
<input type="button" name="butt">
</center>

CSS
1
2
.butt
Margin-top: 100;

Примерно так, писал с телефона, возможно ошибки...
Домой приеду, исходничек подкину...

@Na1n · 31.07.2013, 13:35

Все, я дома, вот исходник:

Кликните здесь для просмотра всего текста

siter.zip

А вот словами:

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
    <title>TeamMerryMiners</title>
    <meta charset="utf-8" />
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<center>
<input type="" name="inp" class="inp">
</center>
<center>
<input type="button" name="butt" class="butt">
</center>
<body>
</body>
</html>

И Стили:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
* {
    margin: 0;
    padding: 0;
    outline: none;
}
input[name=butt] { 
    margin-top: 10px;
    width: 100px;
}
input[name=inp] {
    margin-top: 200px;
}

Учти, это просто пример!

Не по теме:

Советую программу Sublime Text 2 Для работы с текстом, очень удобная.

@Василий_01 · 31.07.2013, 14:18

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<object height="120" width="550" type="application/x-shockwave-flash" wmode="transparent"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://active.macromedia.com/flash7/cabs/swflash.cab#version=9,0,0,0"
data="http://d2v58id5qi36gs.cloudfront.net/v1/banner.swf?autoplay_=true&txt_1=%D0%9F%D1%80%D0%B0%D0%B9%D0%BC+%D0%BA%D0%BE%D1%81%D0%BC%D0%B5%D1%82%D0%B8%D0%BA,23,172,0,0,0xFFFFFF,1&txt_2=%D0%9B%D1%83%D1%87%D1%88%D0%B0%D1%8F+%D0%BF%D0%B0%D1%80%D1%84%D1%8E%D0%BC%D0%B5%D1%80%D0%B8%D1%8F,17,130,33,0,0xFFFFFF,0&txt_3=%D0%BE%D1%82+250+%D1%80%D1%83%D0%B1%D0%BB%D0%B5%D0%B9,60,110,40,0,0xFFFFFF,0&img_1=http://d2v58id5qi36gs.cloudfront.net/v1/cvety/discount_120.png,300,0,0,1&img_2=http://d2v58id5qi36gs.cloudfront.net/v1/r/spacer.gif,-100,25,0,0&fonimg=http://d2v58id5qi36gs.cloudfront.net/v1/fon/fon_purple_600x120.png,12&fongradcol=0xffffff,0xf5f5f5&sdw_1=txt_3,0ffffff&ani_1=img_1,x,10,20&ani_2=img_2,alpha,1,100&ani_3=img_2,x,430,100&ani_4=txt_2,alpha,1,120&ani_5=txt_3,alpha,0.5,20&globalclick=http%3A%2F%2Fwww.prime-cosmetic.com%2F&locale=ru&snd_0=">
<param name="movie" value="http://d2v58id5qi36gs.cloudfront.net/v1/banner.swf?autoplay_=true&txt_1=%D0%9F%D1%80%D0%B0%D0%B9%D0%BC+%D0%BA%D0%BE%D1%81%D0%BC%D0%B5%D1%82%D0%B8%D0%BA,23,172,0,0,0xFFFFFF,1&txt_2=%D0%9B%D1%83%D1%87%D1%88%D0%B0%D1%8F+%D0%BF%D0%B0%D1%80%D1%84%D1%8E%D0%BC%D0%B5%D1%80%D0%B8%D1%8F,17,130,33,0,0xFFFFFF,0&txt_3=%D0%BE%D1%82+250+%D1%80%D1%83%D0%B1%D0%BB%D0%B5%D0%B9,60,110,40,0,0xFFFFFF,0&img_1=http://d2v58id5qi36gs.cloudfront.net/v1/cvety/discount_120.png,300,0,0,1&img_2=http://d2v58id5qi36gs.cloudfront.net/v1/r/spacer.gif,-100,25,0,0&fonimg=http://d2v58id5qi36gs.cloudfront.net/v1/fon/fon_purple_600x120.png,12&fongradcol=0xffffff,0xf5f5f5&sdw_1=txt_3,0ffffff&ani_1=img_1,x,10,20&ani_2=img_2,alpha,1,100&ani_3=img_2,x,430,100&ani_4=txt_2,alpha,1,120&ani_5=txt_3,alpha,0.5,20&globalclick=http%3A%2F%2Fwww.prime-cosmetic.com%2F&locale=ru&snd_0="/>
<param name="menu" value="false"/>
<param name="allowFullscreen" value="true"/>
<param name="allowScriptAccess" value="always"/>
<param name="test" value="always"/>
<param name="bgcolor" value="#ffffff"/>
<param name="wmode" value="transparent" />
<embed type="application/x-shockwave-flash" src="http://d2v58id5qi36gs.cloudfront.net/v1/banner.swf?autoplay_=true&txt_1=%D0%9F%D1%80%D0%B0%D0%B9%D0%BC+%D0%BA%D0%BE%D1%81%D0%BC%D0%B5%D1%82%D0%B8%D0%BA,23,172,0,0,0xFFFFFF,1&txt_2=%D0%9B%D1%83%D1%87%D1%88%D0%B0%D1%8F+%D0%BF%D0%B0%D1%80%D1%84%D1%8E%D0%BC%D0%B5%D1%80%D0%B8%D1%8F,17,130,33,0,0xFFFFFF,0&txt_3=%D0%BE%D1%82+250+%D1%80%D1%83%D0%B1%D0%BB%D0%B5%D0%B9,60,110,40,0,0xFFFFFF,0&img_1=http://d2v58id5qi36gs.cloudfront.net/v1/cvety/discount_120.png,300,0,0,1&img_2=http://d2v58id5qi36gs.cloudfront.net/v1/r/spacer.gif,-100,25,0,0&fonimg=http://d2v58id5qi36gs.cloudfront.net/v1/fon/fon_purple_600x120.png,12&fongradcol=0xffffff,0xf5f5f5&sdw_1=txt_3,0ffffff&ani_1=img_1,x,10,20&ani_2=img_2,alpha,1,100&ani_3=img_2,x,430,100&ani_4=txt_2,alpha,1,120&ani_5=txt_3,alpha,0.5,20&globalclick=http%3A%2F%2Fwww.prime-cosmetic.com%2F&locale=ru&snd_0=" width="550" height="120" quality="high" wmode="transparent" pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>

Добавлено через 5 секунд

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<object height="120" width="550" type="application/x-shockwave-flash" wmode="transparent"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://active.macromedia.com/flash7/cabs/swflash.cab#version=9,0,0,0"
data="http://d2v58id5qi36gs.cloudfront.net/v1/banner.swf?autoplay_=true&txt_1=%D0%9F%D1%80%D0%B0%D0%B9%D0%BC+%D0%BA%D0%BE%D1%81%D0%BC%D0%B5%D1%82%D0%B8%D0%BA,23,172,0,0,0xFFFFFF,1&txt_2=%D0%9B%D1%83%D1%87%D1%88%D0%B0%D1%8F+%D0%BF%D0%B0%D1%80%D1%84%D1%8E%D0%BC%D0%B5%D1%80%D0%B8%D1%8F,17,130,33,0,0xFFFFFF,0&txt_3=%D0%BE%D1%82+250+%D1%80%D1%83%D0%B1%D0%BB%D0%B5%D0%B9,60,110,40,0,0xFFFFFF,0&img_1=http://d2v58id5qi36gs.cloudfront.net/v1/cvety/discount_120.png,300,0,0,1&img_2=http://d2v58id5qi36gs.cloudfront.net/v1/r/spacer.gif,-100,25,0,0&fonimg=http://d2v58id5qi36gs.cloudfront.net/v1/fon/fon_purple_600x120.png,12&fongradcol=0xffffff,0xf5f5f5&sdw_1=txt_3,0ffffff&ani_1=img_1,x,10,20&ani_2=img_2,alpha,1,100&ani_3=img_2,x,430,100&ani_4=txt_2,alpha,1,120&ani_5=txt_3,alpha,0.5,20&globalclick=http%3A%2F%2Fwww.prime-cosmetic.com%2F&locale=ru&snd_0=">
<param name="movie" value="http://d2v58id5qi36gs.cloudfront.net/v1/banner.swf?autoplay_=true&txt_1=%D0%9F%D1%80%D0%B0%D0%B9%D0%BC+%D0%BA%D0%BE%D1%81%D0%BC%D0%B5%D1%82%D0%B8%D0%BA,23,172,0,0,0xFFFFFF,1&txt_2=%D0%9B%D1%83%D1%87%D1%88%D0%B0%D1%8F+%D0%BF%D0%B0%D1%80%D1%84%D1%8E%D0%BC%D0%B5%D1%80%D0%B8%D1%8F,17,130,33,0,0xFFFFFF,0&txt_3=%D0%BE%D1%82+250+%D1%80%D1%83%D0%B1%D0%BB%D0%B5%D0%B9,60,110,40,0,0xFFFFFF,0&img_1=http://d2v58id5qi36gs.cloudfront.net/v1/cvety/discount_120.png,300,0,0,1&img_2=http://d2v58id5qi36gs.cloudfront.net/v1/r/spacer.gif,-100,25,0,0&fonimg=http://d2v58id5qi36gs.cloudfront.net/v1/fon/fon_purple_600x120.png,12&fongradcol=0xffffff,0xf5f5f5&sdw_1=txt_3,0ffffff&ani_1=img_1,x,10,20&ani_2=img_2,alpha,1,100&ani_3=img_2,x,430,100&ani_4=txt_2,alpha,1,120&ani_5=txt_3,alpha,0.5,20&globalclick=http%3A%2F%2Fwww.prime-cosmetic.com%2F&locale=ru&snd_0="/>
<param name="menu" value="false"/>
<param name="allowFullscreen" value="true"/>
<param name="allowScriptAccess" value="always"/>
<param name="test" value="always"/>
<param name="bgcolor" value="#ffffff"/>
<param name="wmode" value="transparent" />
<embed type="application/x-shockwave-flash" src="http://d2v58id5qi36gs.cloudfront.net/v1/banner.swf?autoplay_=true&txt_1=%D0%9F%D1%80%D0%B0%D0%B9%D0%BC+%D0%BA%D0%BE%D1%81%D0%BC%D0%B5%D1%82%D0%B8%D0%BA,23,172,0,0,0xFFFFFF,1&txt_2=%D0%9B%D1%83%D1%87%D1%88%D0%B0%D1%8F+%D0%BF%D0%B0%D1%80%D1%84%D1%8E%D0%BC%D0%B5%D1%80%D0%B8%D1%8F,17,130,33,0,0xFFFFFF,0&txt_3=%D0%BE%D1%82+250+%D1%80%D1%83%D0%B1%D0%BB%D0%B5%D0%B9,60,110,40,0,0xFFFFFF,0&img_1=http://d2v58id5qi36gs.cloudfront.net/v1/cvety/discount_120.png,300,0,0,1&img_2=http://d2v58id5qi36gs.cloudfront.net/v1/r/spacer.gif,-100,25,0,0&fonimg=http://d2v58id5qi36gs.cloudfront.net/v1/fon/fon_purple_600x120.png,12&fongradcol=0xffffff,0xf5f5f5&sdw_1=txt_3,0ffffff&ani_1=img_1,x,10,20&ani_2=img_2,alpha,1,100&ani_3=img_2,x,430,100&ani_4=txt_2,alpha,1,120&ani_5=txt_3,alpha,0.5,20&globalclick=http%3A%2F%2Fwww.prime-cosmetic.com%2F&locale=ru&snd_0=" width="550" height="120" quality="high" wmode="transparent" pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>

Новые блоги и статьи Все статьи Все блоги /
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .
Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .

@Vlad10 4 / 4 / 1 Регистрация: 12.06.2011 Сообщений: 111

	Как расположить 2 элемента друг под другом по центру экрана? 31.07.2013, 10:41. Показов 10051. Ответов 3 Метки нет (Все метки) Есть 1 input и 1 button. Хочу расположить ровно в центре страницы друг под другом, но по нормальному не получается, всё съезжает =( 0