chocolate_moles

Выровнять текст по центру и по левому краю

Рекомендованные сообщения

Необходимо сверстать адаптивный блок в котором текст будет в центре и выровнен по левому краю. Такая вот простая задачка, решение которой я никак не могу найти

Untitled-1.jpg

Изменено пользователем chocolate_moles

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
12 минут назад, AlexZaw сказал:

Так в центре или все-таки по левому краю?

В центре и все-таки по левому краю. Вместе, сразу, одновременно

Изменено пользователем chocolate_moles

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
1 минуту назад, chocolate_moles сказал:

В центре и все-таки по левому краю. Вместе, сразу, одновременно

Нарисуйте как это должно выглядеть :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Как-то так:

<div class="wrap">
  <div class="text">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, ullam.</p>
</div>
  </div>
.wrap{
  width: 400px;
  border: 1px solid #000;
  text-align: center;
}
.text{
  display: inline-block;
  background: #f00;
  text-align: justify;
  width: 80%;
}

Ну или text-align: left; вместо text-align: justify;

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
5 минут назад, AlexZaw сказал:

Как-то так:

 

2 часа назад, chocolate_moles сказал:

адаптивный блок

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
5 минут назад, chocolate_moles сказал:

адаптивный блок

Эммм так в чем проблема то? Вы не знаете как сделать резиновый блок, или не умеете пользоваться медиа запросами?

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
9 минут назад, AlexZaw сказал:

Эммм так в чем проблема то? Вы не знаете как сделать резиновый блок, или не умеете пользоваться медиа запросами?

 

Да вроде умею, только у меня не получается, поэтому я и задал этот вопрос.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
14 минут назад, chocolate_moles сказал:

Да вроде умею, только у меня не получается, поэтому я и задал этот вопрос.

Понятно, тогда вот:

Резиновый блок:

.wrap{
  width: 20%;
  border: 1px solid #000;
  text-align: center;
}
.text{
  display: inline-block;
  background: #f00;
  text-align: left;
  width: 80%;
}

Медиа запросы:

.wrap{
  width: 400px;
  border: 1px solid #000;
  text-align: center;
}
.text{
  display: inline-block;
  background: #f00;
  text-align: left;
  width: 80%;
}
@media screen and (max-width:960px){
  .wrap{
    width: 300px;
  }
}

по аналогии можете добавить нужные вам ширины экрана

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
17 минут назад, AlexZaw сказал:

Понятно, тогда вот:

https://jsfiddle.net/ba7zsr8h/1/

Изменено пользователем chocolate_moles

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
56 минут назад, chocolate_moles сказал:

Если вы хотите добиться такого же результата на чистом css, то, к сожалению, это невозможно ?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
5 часов назад, AlexZaw сказал:

Если вы хотите добиться такого же результата на чистом css, то, к сожалению, это невозможно ?

А так бы хотелось решать все проблемы через css(

Изменено пользователем chocolate_moles

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Статистика пользователей

    46 188
    Всего пользователей
    3 128
    Рекорд онлайна
    Marchysh
    Новый пользователь
    Marchysh
    Регистрация
  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.