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

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

ФАКЕР

ФАКЕР

Проверенные
Сообщения
760
Решения
9
Реакции
75
Баллы
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
Просмотры
203
ФАКЕР
ФАКЕР
request
  • Решено
XF 2.2 Почему не выводит аватар в профиле пользователя?
Ответы
3
Просмотры
336
IlyaPep
IlyaPep
ФАКЕР
  • Закрыта
  • Вопрос
XF 2.2 Как зашифровать часть кода на странице?
Ответы
8
Просмотры
479
ФАКЕР
ФАКЕР
B
  • Решено
XF 2.2 Ошибка при загрузке аватара
Ответы
12
Просмотры
785
dimka1510
dimka1510
detas
  • Решено
XF 2.2 Сломал оповещения и почту
Ответы
4
Просмотры
321
Matew
Matew
Назад
Сверху Снизу