Как перемещать текст по странице сайта в css? [закрыт]

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

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение.

Закрыт 6 лет назад .

Есть блок, и на нем должны быть размещены различные фразы-ссылки. Одну из них мне нужно переместить вправо на некоторое количество пикселей. Как это сделать?

Отслеживать
67.9k 216 216 золотых знаков 77 77 серебряных знаков 219 219 бронзовых знаков
задан 17 дек 2016 в 17:27
1,079 4 4 золотых знака 19 19 серебряных знаков 32 32 бронзовых знака

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Используйте свойство margin-left :

#link2

 
link1 
link2 
link3 
link4 
link5 

Отслеживать
ответ дан 17 дек 2016 в 17:32
Sergey Semushin Sergey Semushin
584 3 3 серебряных знака 20 20 бронзовых знаков
а как сделать так, чтобы они все билы на одной линии .
17 дек 2016 в 18:29

@Bernard то есть что бы все были сдвинуты? Если да, то в css пропиши #links a . А вообще, советую самоучитель какой-нибудь почитать.

17 дек 2016 в 21:07

• css
• css3
• text

Важное на Мете

Похожие

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

text-align

Определяет горизонтальное выравнивание текста в пределах элемента.

Синтаксис

text-align: center | justify | left | right | inherit

text-align: center | justify | left | right | start | end

Значения

center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. auto Не изменяет положение элемента. inherit Наследует значение родителя. start Аналогично значению left , если текст идёт слева направо и right , когда текст идёт справа налево. end Аналогично значению right , если текст идёт слева направо и left , когда текст идёт справа налево.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Выравнивание текста в браузере Safari

Internet Explorer до версии 7.0 включительно несколько иначе трактует данный пример, чем другие браузеры, выравнивая не только текст, но и блоки (рис. 2).

Рис. 2. Выравнивание текста в браузере Internet Explorer 7

Объектная модель

[window.]document.getElementById(» elementID «).style.textAlign

Браузеры

IE до версии 7.0 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.

Как передвинуть текст в рамке выше?

Как переместить текст в рамке выше? Дело в том, что этому мешает border, который я не знаю, как обойти. Спасибо, код прилагается.

*, *:before, *:after < box-sizing: border-box; >html, body < height: 100%; padding: 0; margin: 0; background-color: #B63D32; >#page-wrapper < width: 100%; height: 100%; >#content-wrapper < width: 80%; height: 100%; display: inline-block; float: right; >main < width: 100%; height: 110vh; >/*Начало SECTION*/ section < background: url(/img/fon.png); background-color: #BFBFBF; background-size: cover; display: flex; justify-content: flex-start; flex-direction: row; align-items: flex-start; width: 100%; height: 110vh; /*РАМКА*/ border-left: 2vh solid black; border-top: 0px solid black; border-right: 2vh solid black; border-bottom: 0px solid black; /*Конец РАМКИ*/ >.container2 < width: 100%; height: 109.9vh; >.Nashi_Tseny < width: 100%; height: 106.9vh; >.photo-price < height: 100vh; >.text-price < position: relative; margin: 0 auto; width: 100vh; height: 94vh; border: solid transparent; border-width: 25vh 10vh 15vh 10vh; border-image: url(//i.stack.imgur.com/wky2z.png); border-image-slice: 800 250 338; border-image-repeat: round; >.text-price < font-size: 2.1vh; font-family: Yanone Kaffeesatz, sans-serif; font-style: normal; >.text-price p < padding-left: 20px; >.photo-price < height: 97vh; width: 100%; >.border-price < max-width: 100px; >h2 < margin-top: 30px; font-size: 4.7vh; font-family: Impact; font-weight: 400; padding-top: 5px; ; text-decoration: underline; text-decoration-skip-ink: none; text-align: center; >strong < font-weight: bolder; font-size: 2.1vh; >.vosem_tis

 
 
 
 
Наши цены:
 
 
Облачения:
 
-иерейские шелковые от 9000   рублей с шикарными галунами
 
-иерейские парчевые от 10000  рублей*
 
Подрясники:
 
Подризники:
 
Рясы:
 
Стихари:
 
Скуфии:от 800 рублей
 
Камилавки:от 1700
 
Крещальные:
 
Облачения для храма:
 
Вышитые кресты:
 
Кадильный уголь:
 
*парчевые облачения с индийскими галунами шьются по заказу
 
 
 
 
 
 

Как я могу переместить картинку на моей HTML-странице?

У меня есть картинка, и мне нужно переместить ее под словом с тире, но я не могу это сделать по какой-то причине он не хочет поднимать эту иконку и теперь я добавляю другие, а он ставит их еще ниже код:

весь код:

    body  
Подпишись
    

Отслеживать

ДОБРЫЙ ДЕДУШКА

задан 21 июл 2019 в 16:22

ДОБРЫЙ ДЕДУШКА ДОБРЫЙ ДЕДУШКА

25 1 1 золотой знак 1 1 серебряный знак 4 4 бронзовых знака

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

У вас у картинки с линией высота указана 180 пикселей, из-за этого и получается дырка.

Отслеживать

ответ дан 21 июл 2019 в 18:39

2,114 1 1 золотой знак 11 11 серебряных знаков 18 18 бронзовых знаков

Как в html сдвинуть текст вправо?

Если вы хотите выровнять весть текст по правому краю, то нужно применить в CSS стилях text-align: right.
Если же вам нужно просто подвинуть текст или элементы списка правее (увеличить отступ от левого края), примените к селектору стиль для ul, ol или p:
ul padding: 0;
margin-left: 20px;
>
Padding — обнуляет значения для разных браузеров, а margin-left делает оступ вправо.

Остальные ответы
Align=right
text-align: right

к тому элементу, в котором находится текст — прописать css стиль: padding-left:40px;
Чтобы сместить текст на 40px вправо 😀

Изучи программирование HTML кода и что означают теги (слова между <>). Можно конечно создать файл и в Офие с нормальным форматированием текста, а потом сохранить как html файл.

Как подвинуть текст внутри div?

Не могу понять как установить надпись «02», также как на примере выше. Можете подсказать?
Выходит, только так:

И вообще правильно ли я сверстал данный элемент?

Базовый HTML

  
Базовые теги
  
Теги картинок и ссылок
  
Теги таблиц
  
Служебные теги
  
Кодстайл HTML 
02

.card

Спасибо за помощь!

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

2 комментария

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

Если мой вариант вам подходит, отметьте его как решение, пожалуйста

Ankhena @Ankhena Куратор тега CSS

И вообще правильно ли я сверстал данный элемент?

0. Для начала, знакомьтесь, это валидатор html https://validator.w3.org/nu/
Он расскажет о том, что атрибут align устарел.

1. 02 это псевдоэлемент.

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

Либо это просто номер страниц или глав (секций) или типа того. И тогда это просто псевдоэлемент. Если это только украшения.

Этот псевдоэлемент позиционируете с помощью гридов или абсолютом.

2. Картинка, которую вы даже называете словом fon.png должна быть сделана фоном. Она ведь не содержит никакого смысла, а является только украшением.
И слеши в путях пишутся в другую сторону, так /

3. Высоту в верстке задают очень редко (например, когда надо картинку вписать в блок). Мы почти никогда не знаем сколько будет контента на реальном сайте, какого размера шрифт у пользователя и т.д. Поэтому высота блока сама подстраивается по контенту. Если очень нужно, можно задать минимальную или максимальную высоту.