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

[chocolate_moles]

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

Edited December 11, 2018 by chocolate_moles

[AlexZaw]

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

[chocolate_moles]

12 минут назад, AlexZaw сказал:

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

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

Edited December 11, 2018 by chocolate_moles

[AlexZaw]

1 минуту назад, chocolate_moles сказал:

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

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

[chocolate_moles]

Добавил несколько пояснений, чтобы было понятнее

[AlexZaw]

Как-то так:

<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;

[chocolate_moles]

5 минут назад, AlexZaw сказал:

Как-то так:

 

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

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

[AlexZaw]

5 минут назад, chocolate_moles сказал:

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

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

 

[chocolate_moles]

9 минут назад, AlexZaw сказал:

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

 

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

[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;
  }
}

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

[chocolate_moles]

17 минут назад, AlexZaw сказал:

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

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

Edited December 11, 2018 by chocolate_moles

[AlexZaw]

56 минут назад, chocolate_moles сказал:

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

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

[chocolate_moles]

5 часов назад, AlexZaw сказал:

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

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

Edited December 12, 2018 by chocolate_moles