Как разместить блок в центре другого блока css

Как в css разместить два блока друг под другом?

Доброго времени суток.
У меня есть два блока (скрин ниже)
5e4b8f03bb03f284816596.png
А мне нужно их разместить друг под другом, как это правильно сделать?
Код css файла:

  • Вопрос задан более года назад
  • 4946 просмотров

Простой 1 комментарий

  • Facebook
  • Вконтакте
  • Twitter

Ankhena

Вы удивитесь, но 2 блока встают друг под другом без флексов, сами по себе, просто потому что они блоки.

CSS блок посередине другого блока

left: 50%; // сдвиг вправо на 50% ширины внешнего блока
top: 50%; // сдвиг вниз на 50% высоты внешнего блока
transform: translateX(-50%) translateY(-50%); // Сдвиг влево на 50% ширины и вверх на 50% высоты внутреннего блока. Андрей 1

Другие интересные вопросы и ответы

Возможно ли изучить программирование за лето?

Смотря что ты хочешь изучить и что имеешь ввиду под программированием.

Если html+css — да, вполне возможно. Но это верстка а не программирование. SQL — так же возможно, но и работу с БД я так же не могу назвать настоящим программированием.

Если же брать серьезное программирование — однозначное нет. Минимум год самообучения по 8-12 часов в день. Минимум — если у тебя уже есть некая база и неплохо поставленная логика. Значительно больше если нет.
У меня была очень сильная база (я несколько лет работал в IT конторе мирового масштаба(входит в первую десятку по размеру) международной тех.поддержкой высшего уровня[там было 5 таких] а так же QA[тестировщиком], а так же некую базу программирования уже имел), но у меня пошло пол года по 8-12 часов в день что бы достичь некоего более-менее неплохого уровня на C#. По факту недостаточного что бы работать полноценным программистом. Но все же достаточного для автоматизации.

Реальное программирование — это не просто синтаксис языка. Программирование — это умение решать задачи. Как математические так и логические. Логические — в первую очередь! А так же знание ряда алгоритмов. А так же знание инструментов которыми пользуешься(например нужно понимать как внутри устроен List/LinkedList и Array для того,что бы их правильно оптимально использовать, просто знать что длинна аррея не меняется — НЕ ДОСТАТОЧНО). Синтаксиса языка НЕ ДОСТАТОЧНО кто бы тебе не говорил обратного.

Что бы не быть баснословным, я наведу простой пример использования алгоритмов:

Алгоритм среднего между 2мя целыми числами нормального человека:
(a+b)/2
алгоритм среднего из 2х целых чисел программиста(умного, а не в кавычках):
a/2+b/2+(a%2+b%2)/2
где % — вычисление остачи от деления.

потому как первый алгоритм даст ровно в половине из возможных случаев неправильный ответет из-за переполнения памяти + еще в четверти случаях просто на одиницу меньше нужного. Заметьте! Не ошибку! А неправильный ответ в трех случаях из 4х! А «программист»(именно в кавычках) еще и не будет в курсе почему так 🙂

Для нецелочисленного типа данных(double, float) проще:
a/2+b/2

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

С другой стороны — я за то что бы не грузить человека «паттернами» и излишними алгоритмами. На новичков это подействует, скорее всего, негативно, чем позитивно. Типа…. «я слышал про паттерн ____________, вот задача на которую КАЖЕТСЯ подойдет он.» А потом решение задачи усложняется в разы. Ну или затягивается. Паттерны нужно не только знать, но и применять с умом. К алгоритмам так же нужны знания как и когда их лучше применять. Поэтому — БЕЗ ФАНАТИЗМА.

PS: человек снизу, который меня активно критикует(Jone Done), даже путает среду разработки и язык… Delphi — это не язык, а IDE, а язык там это Object Pascal.
Так же там в коментариях у нее я проверил ее «нормальные знания джавы»… Желающие посмотреть на «номально выучившую язык за 2,5 месяца» смотреть туда. И это при том что Я ДЖАВУ НЕ ЗНАЮ, а, так, посмотрел инфу не более чем 3 дня где-то пол года назад просто для общего развития и что бы лично сложить свое собственное мнение по языку.

Валерій Пістольний 49

как называется фэндом блок би?

Верстка, CSS, HTML, SVG - фото2Источник: ivanbalashov.ru

Как создать блоки на странице

В этой статье разберём, как сделать страницу из отдельных блоков для сообщений, анонсов, картинок, а затем посмотрим, как такую разбивку сделать в WordPress.

Что-то типа такого:

Рис. 1 Четыре блока с закруглёнными углами и тенью.

34

В общем-то, вариантов разбивки очень много. Думаю, что разобрав эти 4, Вы уже сами дальше сможете комбинировать блоки.

Итак смотрим код варианта показанного на Рис. 1.

Что здесь можно подкорректировать?

Во первых — это конечно width и height (ширина и высота) блоков.

Во вторых, можно изменить цвет блоков background , изменить радиус углов border-radius , и можно придать блокам тень box-shadow .

Подробно показано, как это делается в статье Как сделать тень для текста, картинки, блока.

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

Чтобы сделать вариант Рис. 2, нужно просто весь селектор блоков повторить ещё раз, и добавить дивы в тело тега body.

Точно таким образом можно нашлёпать таких блоков хоть сотню. Менять можно число блоков в строке и их размер.

Вариант Рис. 3 делается немного по другому. Блоки не собираются в один селектор, а прописываются друг за другом.

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

Можно убрать из группового селектора все свойства border-radius и box-shadow, а вместо них прописать рамку:

Тогда страница приобретёт такой вид:

Четыре блока разных размеров, расположенные на странице

< body >
< div id color: #008080;">wrapper ">
< div class color: #008080;">one ">
< div class color: #008080;">two ">< /div >
< div class color: #008080;">three ">< /div >
< div class color: #008080;">four ">< /div >
< /div >
< /div >
< /body >
< /html >

Как видите, размещать блоки можно и по оси Z. И такой метод предоставляет большие возможности для дизайна.

Представьте, что вместо блоков У Вас изображения. Убрав у них тень, можно одно изображение накладывать на другое (блоки у меня ведь накладываются друг на друга), и таким образом создать оригинальную картинку.

Дальше экспериментируйте, если хотите, сами, а сейчас посмотрим, как разбить страницу на блоки с закруглёнными углами и тенью, в WordPress.

Так как шаблонов у этой CMS очень много, то я покажу общий принцип создания блоков, а уж подгонять их расположение при помощи margin, Вам придётся исходя из настроек темы.

На этом блоге установлена стандартная, идущая в WordPress по умолчанию, тема &#8212; TwentyTen.

А сделаем мы примерно вот так: (Это не картинка. Это html + css)

Количество блоков в строке, а так-же их размер &#8212; на Ваше усмотрение.

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

< p style color: #008080;">float: left; font-family: Verdana; padding: 10px; font-size: 14px; margin: 3px 3px 3px 5px; width: 170px; height: 200px; border-radius: 5px; box-shadow: rgba(0,0,0,5.2) 0px 1px 3px; ">Блок 2< /p >

< p style color: #008080;">float: left; font-family: Verdana; padding: 10px; font-size: 14px; margin: 3px 3px 3px 5px; width: 170px; height: 200px; border-radius: 5px; box-shadow: rgba(0,0,0,5.2) 0px 1px 3px; ">Блок 3< /p >
< /div >

< div style color: #008080;">display: inline; width: 600px; ">
< p style color: #008080;">float: left; font-family: Verdana; padding: 10px; font-size: 14px; margin: 3px 3px 3px 5px; width: 170px; height: 200px; border-radius: 5px; box-shadow: rgba(0,0,0,5.2) 0px 1px 3px; ">Блок 4< /p >

< p style color: #008080;">float: left; font-family: Verdana; padding: 10px; font-size: 14px; margin: 3px 3px 3px 5px; width: 170px; height: 200px; border-radius: 5px; box-shadow: rgba(0,0,0,5.2) 0px 1px 3px; ">Блок 5< /p >

< p style color: #008080;">float: left; font-family: Verdana; padding: 10px; font-size: 14px; margin: 3px 3px 3px 5px; width: 170px; height: 200px; border-radius: 5px; box-shadow: rgba(0,0,0,5.2) 0px 1px 3px; ">Блок 6< /p >
< /div >

После того как все размеры, отступы, и оформление подогнаны, нужно перенести все стили в файл style.css шаблона.

Для этого в имеющихся блочных элементах (в нашем случае это div и p , вместо атрибута style , с значениями, прописываем class , с произвольным названием.

Потом идём в файл style.css шаблона, и вписываем этот класс.

Затем копируем все значения атрибута style , и вставляем их в созданный класс в файле. Сам атрибут и его значения, из блочного элемента удаляются, остаётся только класс

В тексте остаётся только такой html код:

А в файле style.css &#8212; такой:

.okno1 <
float: left;
font-family: Verdana;
padding: 10px;
font-size: 14px;
margin: 3px 3px 3px 5px;
width: 170px;
height: 200px;
border-radius: 5px;
box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;
>

Затем обновляется страница, и проверяется, корректно ли отображаются созданные Вами блоки. Бывали случаи, когда приходилось повторно обновлять страницу, чтоб всё встало на свои места.

Но это уже зависит от особенностей темы.

Желаю творческих успехов.

Короткий отдых
Перемена


Классный руководитель:
&#8212; Ну, как вы трудились дома?
&#8212; Дома я трудился над тарелкой с пирожками, а потом над компотом.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *