выравнивание div по правому краю html
Как поставить div справа, обтекание, пример
Свойство блока float со значением right. Свойство right со значением 0.
О позиционировании блока div справа.
Позиция блока справа свойство float со значением right
float:right;/* Положение справа */
background: #fd0; /* Цвет фона */
width: 300px; /* Ширина */
Смотрим, что мы получили:
Этот текст написан выше блока.
Далее текст, который будет написан, будет находиться ниже блока, как видим, только тот текст, что написан ниже блока див будет обтекать наш блок слева. Это дает возможность соответствующей декорации страницы, например расположение картинки, в виде превью!
И как только текст заполнит всю высоту, блока, который находится справа, то текст будет уже заполнять всю ширину родительского блока.
Div расположен справа свойство float без обтекания.
Самое простое, с моей точки зрения, поместить наш див с классом «sprava» в другой див, который будет иметь аналогичную высоту, что и класс sprava, т.е. 100px.
И добавим нашему наружному блоку «border: 1px solid;», чтобы мы его смогли увидеть!
Результат расположения блока справа:
Как видим, наш блок расположился справа, и текст, который написан ниже, и расположился ниже блока.
Div справа с помощью свойства margin-left
Создадим ещё раз новый див. С новым классом.
background: #fd0; /* Цвет фона */
width: 300px; /* Ширина */
Смотрим, что получилось:
Дело в том. что мы не учли точку отсчета по умолчанию, а она располагается в верхнем левом углу. Нашего блока.
Как видим, наш блок справа не зашел за края родительского блока.
Div справа в крайней правой точке монитора
Создадим новый блока и новый класс:
Данный блок будет находится по горизонтали на этих словах, но никак не будет влиять на него.!
Если вы уменьшите размер окна, до менее чем 740(ширина родительского блока), то блок наедет на текст.
Когда данный блок будет наезжать на основной блок с текстом?!
Сделаем скрин, когда размер экрана меньше 1080 и поставим родительскому блоку «border», чтобы мы могли его увидеть.
Если вы читали внимательно, то должны были заметить, что цифры не бьется.
Главный блок » div » = 740px.
Поэтому, как только ширина окна будет меньше 1080, наш блок будет наезжать на основной блок «main_text».
Div справа в крайней правой точке родительского блока
Когда мы рассматривали позицию блока справа с помощью «margin-left: 440px;», но если ваш родительский блок имеет резиновую ширину, то этот блок справа, будет уезжать вправо, при уменьшении основного и влево при увеличении.
И далее следующий вариант, блок будет находиться справа, в любой ситуации.
Div справа с помощью свойства right
Возьмем данные из предыдущего блока. и поместим его в другой блок и задаем ему свойства:
Все про CSS выравнивание
Каждый верстальщик постоянно сталкивается с необходимостью выравнивания контента в блоке: по горизонтали или по вертикали. Есть несколько неплохих статей на этот счет, но все они предлагают много интересных, но мало практичных вариантов, из-за чего приходится тратить лишнее время, чтобы выделить главное. Решила подать эту информацию в той форме, которая удобна мне, чтобы больше не гуглить.
Выравнивание блоков с известными размерами
Проще всего с помощью CSS выровнять блоки, у которых заранее известна высота (для выравнивания по вертикали) или ширина (для горизонтального выравнивания).
Выравнивание при помощи padding
Иногда можно не центрировать элемент, а добавить ему границы свойством «padding«.
Например, есть картинка 200 на 200 пикселей, и требуется центрировать ее в блоке 240 на 300. Можем задать высоту и ширину внешнему блоку = 200px, и добавить по 20 пикселей сверху и снизу, и по 50 слева и справа.
Выравнивание абсолютно позиционированных блоков
Если для блока задано «position: absolute«, тогда его можно позиционировать относительно ближайшего родителя с «position: relative». Для этого нужно всем свойствам («top«,»right«,»bottom«,»left«) внутреннего блока присвоить одинаковое значение, а также «margin: auto».
*Есть нюанс: Ширина (высота) внутреннего блока + значение left (right, bottom, top) не должны превышать размеры родительского блока. Надежнее свойствам left (right, bottom, top) присваивать 0 (ноль).
Горизонтальное выравнивание
Выравнивание посредством «text-align: center»
Для выравнивания текста в блоке есть специальное свойство «text-align«. При установленном значении «center» каждая строка текста выровняется по горизонтали. Для многострочного текста такое решение используется крайне редко, чаще этот вариант можно встретить для выравнивания span-ов, ссылок или картинок.
Стоит заметить, что это свойство будет работать не только для текста, но и для любых строчных элементов («display: inline»).
Выравнивание блоков при помощи margin
Блочные элементы с известной шириной легко выравниваются по горизонтали, если установить им «margin-left: auto; margin-right: auto». Обычно используется сокращенная запись: «margin: 0 auto» (вместо ноля может быть любое значение). Но вот для выравнивания по вертикали такой способ не подойдет.
Вертикальное выравнивание
Выравнивание свойством line-height
В том случае, когда в блоке только одна строка, можно добиться ее выравнивания по вертикали, применив свойство «line-height» и установив ему желаемую высоту. Для надежности стоит установить еще и «height», значение которого будет равно значению «line-height», потому что последние поддерживается не во всех браузерах.
Так же возможно добиться выравнивания блока с несколькими строками. Для этого придется использовать дополнительный блок-обертку, и устанавливать высоту строки ему. Внутренний блок может быть многострочным, но обязательно «inline». К нему нужно применить «vertical-align: middle».
У блока обертки должно быть установлено «font-size: 0». Если не установить нулевой размер шрифта, то браузер добавит от себя несколько лишних пикселей. Также придется указать размер шрифта и высоту строки для внутреннего блока, ведь эти свойства наследуются от родителя.
Выравнивание по вертикали в таблицах
Свойство «vertical-align» также действует на ячейки таблицы. C установленным значением «middle», контент внутри ячейки выравнивается по центру. Конечно, табличная верстка в наше время считается архаической, но в исключительных случаях можно симулировать ее, указав «display: table-cell«.
Обычно для выравнивания по вертикали пользуюсь именно этим вариантом. Ниже пример верстки, взятый из готового уже проекта. Интерес представляет именно картинка, которая центрируется по вертикали данным способом.
css правый край div1 прижать к правому краю div2
Есть div1, внутри него div2.
Как div2 правым краем с помощью css прижать правому краю div2.
Добавлено через 34 минуты
бррр.)))
text-align: right
в сво-вах css div1.
Прижать блок к правому краю
Начал изучать css и не получается сделать как хочу, помогите пожалуйста прижать синий блок к.
Прижать картинку к правому краю
Здравствуйте! В блоке содержится изображение и таблица. Таблица шире чем картинка и, соответственно.
Прижать кнопку к нижнему правому краю
Кнопка прижимается только к низу, но слева, в чем проблема? 11
Если я правильно понял суть, то нужно
Alorian’а первый вариант точно работает и точно правильный. а насчёт позиционирования флоатом никогда не слышал и не думал что работает.
З.Ы. модераторы, если что извините. потом удалите это сообщение)
xxxNEIxxx, У тебя мало постов недорос еще 🙂 Если я не ошибаюсь надо минимум 200 постов. Прочти в теме что админ создал там есть еще дискусия по поводу анимированных аватаров и т.д.
этот способ в резиновой вёрстке работает отлично! а насчёт флоата, по идеи ничего не должно произойти если в диве находиться только один див! если в диве находиться два дива то можно сделать один плавающим.
я в програмировании практически на нуле, но в вёрстке шарю достаточно хорошо 
З.Ы. 200 постов это всмысле репутации? ты меня наверн не правельно понял, я говрил за эту цытату у тебя: Опыт — это имя, которое каждый дает своим ошибкам.
Почитайте документацию, или поставьте эксперимент если документации не верите. На самом деле сталкивался пару раз с тем что в документации не правильно пишут, но этот не тот случай.
Добавлено через 14 минут
ппц, я же говорю, насчёт первого способа я уверен что работает отлично, потому что сам так делаю!
а насчёт флоата я знаю как с ним обращаться! но если в диве будет только ОДИН див и для него float: right, то я не уверен что он просто станет с правой стороны, потому что его ничто не будет обтекать! но я в этом не уверен, поэтому и не говорю ничего прямо за флоат.
З.Ы. твоя цытата с htmlbook говорит за обтекание но ничего не говорит за один елемент!
Выравнивание текста
Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. В табл. 1 показаны варианты выравнивания блока текста.
