Sign in to follow this  
chocolate_moles

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

Recommended Posts

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

Untitled-1.jpg

Edited by chocolate_moles

Share this post


Link to post
Share on other sites
12 минут назад, AlexZaw сказал:

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

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

Edited by chocolate_moles

Share this post


Link to post
Share on other sites
1 минуту назад, chocolate_moles сказал:

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

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

Share this post


Link to post
Share on other sites

Как-то так:

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

Share this post


Link to post
Share on other sites
5 минут назад, chocolate_moles сказал:

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

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

 

Share this post


Link to post
Share on other sites
9 минут назад, AlexZaw сказал:

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

 

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

Share this post


Link to post
Share on other sites
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;
  }
}

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

Share this post


Link to post
Share on other sites
5 часов назад, AlexZaw сказал:

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

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

Edited by chocolate_moles

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Member Statistics

    46,331
    Total Members
    3,128
    Most Online
    god
    Newest Member
    god
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.