Современный облачный хостинг провайдер | Aéza
Контакты ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430

Как выровнять html блок по центру

ФАКЕР

ФАКЕР

Проверенные
Сообщения
831
Решения
9
Реакции
83
Баллы
730
css:
Код: 
.clear-fix{
  clear: both;
   
}

.testimonial{
  width: 100%;
  height: auto;
  margin: 30px auto;


}

.testimonial .item{
  width: 220px;
  margin: 0 10px;
  float: left;
  background: #57b9ff;
  border-radius: 25px;
  box-shadow: 0 0 5px rgba(0,0,0,0.125);
}

.testimonial .item .img{
  padding: 20px;
}

.testimonial .item .img img{
  width: 100px;
  display: block;
  margin: 0 auto;
}

.testimonial .item .name{
  margin-bottom: 20px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.testimonial .item .content{
  background: #fff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  padding: 20px;
  text-align: center;
}

.testimonial .item .content h1{
  margin-bottom: 10px;
  color: #57b9ff;
}

.testimonial .item .content p{
  line-height: 20px;
  margin-bottom: 15px;
}

.testimonial .item .content .stars img{
  width: 25px;
}

html:
Код: 
<div class="wrapper">
   <div class="testimonial">
     <div class="item">
       <div class="img">
         <img src="1.png" alt="">
       </div>
       <div class="name">текст</div>
       <div class="content">
         <h1><i class="fas fa-quote-left"></i></h1>
         <p>текст</p>
         <div class="stars">
           <img src="star.png" alt="">
           <img src="star.png" alt="">
           <img src="star.png" alt="">
           <img src="star.png" alt="">
           <img src="star.png" alt="">
         </div>
       </div>
     </div>
     <div class="item">
       <div class="img">
         <img src="2.png" alt="">

       </div>
       <div class="name">текст</div>
       <div class="content">
         <h1><i class="fas fa-quote-left"></i></h1>
         <p>текст</p>
         <div class="stars">
           <img src="star.png" alt="">
           <img src="star.png" alt="">
           <img src="star.png" alt="">
           <img src="star.png" alt="">
           <img src="star.png" alt="">
         </div>
       </div>
     </div>
     <div class="item">
       <div class="img">
         <img src="3.png" alt="">
       </div>
 <div class="name">текст</div>
       <div class="content">
         <h1><i class="fas fa-quote-left"></i></h1>
         <p>текст</p>
         <div class="stars">
           <img src="star.png" alt="">
           <img src="star.png" alt="">
           <img src="star.png" alt="">
           <img src="star.png" alt="">
           <img src="star.png" alt="">
         </div>
       </div>
     </div>
     <div class="item">
       <div class="img">
         <img src="4.png" alt="">
       </div>
       <div class="name">текст</div>
       <div class="content">
         <h1><i class="fas fa-quote-left"></i></h1>
         <p>текст</p>
         <div class="stars">
           <img src="star.png" alt="">
           <img src="star.png" alt="">
           <img src="star.png" alt="">
           <img src="star.png" alt="">
           <img src="star.png" alt="">
         </div>
       </div>
     </div>
     <div class="clear-fix"></div>
  </div>
</div>


1. Как сделать, что бы эти 4 блока были по центру страницы?
2. Как сделать, что бы при просмотре этой страницы на мобиле был отступ между блоками(каждый друг под другом) 10px например
3. Как сделать что бы на мобиле блоки были на всю ширину страницу. Друг под другом.
 
Решение
recruty
Less: 
.clear-fix
{
    clear: both;
}

.testimonial
{
    width: 100%;
    height: auto;
    margin: 30px auto;

    display: flex; // +
    justify-content: center; // +
    flex-wrap: wrap; // +

    // testimonial -> item
    .item
    {
        width: 220px;
        margin: 0 10px;
        float: left;
        background: #57b9ff;
        border-radius: 25px;
        box-shadow: 0 0 5px rgba(0,0,0,0.125);


        margin: 5px; // +

        // testimonial -> item -> .img
        .img
        {
            padding: 20px;

            // testimonial -> item -> .img -> img
            img
            {
                width: 100px;
                display: block;
                margin: 0 auto;
            }
        }

        //...
Сортировка по дате Сортировка по голосам
mongkolwa написал(а):
Код: 
.wrapper {
    margin: 0 auto;
    text-align: center;
}
Нажмите для раскрытия...
Вставил. css выглядит так:
Код: 
.wrapper {
    margin: 10 auto;
    text-align: center;
}
.clear-fix{
  clear: both;
    
}

.testimonial{
  width: 100%;
  height: auto;
  margin: 30px auto;
  justify-content: center;


}

.testimonial .item{
  width: 220px;
  margin: 0 10px;
  float: left;
  background: #57b9ff;
  border-radius: 25px;
  box-shadow: 0 0 5px rgba(0,0,0,0.125);
}

.testimonial .item .img{
  padding: 20px;
}

.testimonial .item .img img{
  width: 100px;
  display: block;
  margin: 0 auto;
}

.testimonial .item .name{
  margin-bottom: 20px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.testimonial .item .content{
  background: #fff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  padding: 20px;
  text-align: center;
}

.testimonial .item .content h1{
  margin-bottom: 10px;
  color: #57b9ff;
}

.testimonial .item .content p{
  line-height: 20px;
  margin-bottom: 15px;
}

.testimonial .item .content .stars img{
  width: 25px;
}

ничего не изменилось
 
Позитивный голос 0 Негативный голос
Less: 
.clear-fix
{
    clear: both;
}

.testimonial
{
    width: 100%;
    height: auto;
    margin: 30px auto;

    display: flex; // +
    justify-content: center; // +
    flex-wrap: wrap; // +

    // testimonial -> item
    .item
    {
        width: 220px;
        margin: 0 10px;
        float: left;
        background: #57b9ff;
        border-radius: 25px;
        box-shadow: 0 0 5px rgba(0,0,0,0.125);


        margin: 5px; // +

        // testimonial -> item -> .img
        .img
        {
            padding: 20px;

            // testimonial -> item -> .img -> img
            img
            {
                width: 100px;
                display: block;
                margin: 0 auto;
            }
        }

        // testimonial -> item -> name
        .name
        {
            margin-bottom: 20px;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 3px;
        }

        // testimonial -> item -> content
        .content
        {
            background: #fff;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            border-bottom-left-radius: 25px;
            border-bottom-right-radius: 25px;
            padding: 20px;
            text-align: center;

            // testimonial -> item -> content -> h1
            h1
            {
                margin-bottom: 10px;
                color: #57b9ff;
            }

            // testimonial -> item -> content -> p
            p
            {
                line-height: 20px;
                margin-bottom: 15px;
            }

            // testimonial -> item -> content -> .stars img
            .stars img
            {
                width: 25px;
            }
        }
    }
}

@media (max-width: 480px)
{
    .testimonial
    {
        div.item
        {
            width: 100%;
        }
    }
}

HTML: 
<div class="wrapper">
    <div class="testimonial">
        <div class="item">
            <div class="img">
                <img src="1.png" alt="">
            </div>
            <div class="name">текст</div>
            <div class="content">
                <h1><i class="fas fa-quote-left"></i></h1>
                <p>текст</p>
                <div class="stars">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                </div>
            </div>
        </div>
        <div class="item">
            <div class="img">
                <img src="2.png" alt="">
            </div>
            <div class="name">текст</div>
            <div class="content">
                <h1><i class="fas fa-quote-left"></i></h1>
                <p>текст</p>
                <div class="stars">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                </div>
            </div>
        </div>
        <div class="item">
            <div class="img">
                <img src="3.png" alt="">
            </div>
            <div class="name">текст</div>
            <div class="content">
                <h1><i class="fas fa-quote-left"></i></h1>
                <p>текст</p>
                <div class="stars">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                </div>
            </div>
        </div>
        <div class="item">
            <div class="img">
                <img src="4.png" alt="">
            </div>
            <div class="name">текст</div>
            <div class="content">
                <h1><i class="fas fa-quote-left"></i></h1>
                <p>текст</p>
                <div class="stars">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                </div>
            </div>
        </div>
        <div class="clear-fix"></div>
    </div>
</div>

Отмеченное "+" я добавил для фикса + media для адаптивности.
 
Позитивный голос 0 Негативный голос
Решение
recruty написал(а):
Less: 
.clear-fix
{
    clear: both;
}

.testimonial
{
    width: 100%;
    height: auto;
    margin: 30px auto;

    display: flex; // +
    justify-content: center; // +
    flex-wrap: wrap; // +

    // testimonial -> item
    .item
    {
        width: 220px;
        margin: 0 10px;
        float: left;
        background: #57b9ff;
        border-radius: 25px;
        box-shadow: 0 0 5px rgba(0,0,0,0.125);


        margin: 5px; // +

        // testimonial -> item -> .img
        .img
        {
            padding: 20px;

            // testimonial -> item -> .img -> img
            img
            {
                width: 100px;
                display: block;
                margin: 0 auto;
            }
        }

        // testimonial -> item -> name
        .name
        {
            margin-bottom: 20px;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 3px;
        }

        // testimonial -> item -> content
        .content
        {
            background: #fff;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            border-bottom-left-radius: 25px;
            border-bottom-right-radius: 25px;
            padding: 20px;
            text-align: center;

            // testimonial -> item -> content -> h1
            h1
            {
                margin-bottom: 10px;
                color: #57b9ff;
            }

            // testimonial -> item -> content -> p
            p
            {
                line-height: 20px;
                margin-bottom: 15px;
            }

            // testimonial -> item -> content -> .stars img
            .stars img
            {
                width: 25px;
            }
        }
    }
}

@media (max-width: 480px)
{
    .testimonial
    {
        div.item
        {
            width: 100%;
        }
    }
}

HTML: 
<div class="wrapper">
    <div class="testimonial">
        <div class="item">
            <div class="img">
                <img src="1.png" alt="">
            </div>
            <div class="name">текст</div>
            <div class="content">
                <h1><i class="fas fa-quote-left"></i></h1>
                <p>текст</p>
                <div class="stars">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                </div>
            </div>
        </div>
        <div class="item">
            <div class="img">
                <img src="2.png" alt="">
            </div>
            <div class="name">текст</div>
            <div class="content">
                <h1><i class="fas fa-quote-left"></i></h1>
                <p>текст</p>
                <div class="stars">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                </div>
            </div>
        </div>
        <div class="item">
            <div class="img">
                <img src="3.png" alt="">
            </div>
            <div class="name">текст</div>
            <div class="content">
                <h1><i class="fas fa-quote-left"></i></h1>
                <p>текст</p>
                <div class="stars">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                </div>
            </div>
        </div>
        <div class="item">
            <div class="img">
                <img src="4.png" alt="">
            </div>
            <div class="name">текст</div>
            <div class="content">
                <h1><i class="fas fa-quote-left"></i></h1>
                <p>текст</p>
                <div class="stars">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                    <img src="star.png" alt="">
                </div>
            </div>
        </div>
        <div class="clear-fix"></div>
    </div>
</div>

Отмеченное "+" я добавил для фикса + media для адаптивности.
Нажмите для раскрытия...
Вставил ваш css себе на сайт и всё стало офигенно! html не трогал! Спасибо!
 
Позитивный голос 0 Негативный голос
Войдите или зарегистрируйтесь для ответа.
Современный облачный хостинг провайдер | Aéza
Контакты
ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430 г. Краснодар, ул. Маяковского 160, офис 2.4

Похожие темы

ФАКЕР
  • Вопрос
Криво отображается html блок
Ответы
2
Просмотры
427
ФАКЕР
ФАКЕР
Bogdan9874
  • Закрыта
  • Решено
XF 2.2 Счетчик реакций в Visitor Panel
Ответы
5
Просмотры
220
Bogdan9874
Bogdan9874
Felixxx
  • Вопрос
Ошибка при регистрации
Ответы
7
Просмотры
324
Felixxx
Felixxx
Tommi
  • Решено
XF 2.2 Конфликт кнопки "Поделиться в X (Twitter)" с html страницей
Ответы
4
Просмотры
153
LazyMazur
LazyMazur
request
  • Решено
XF 2.2 Почему не выводит аватар в профиле пользователя?
Ответы
3
Просмотры
524
IlyaPep
IlyaPep
Назад
Сверху Снизу