Я пытаюсь выровнять все мои фиктивные логотипы по вертикали с помощью начальной загрузки:

Однако по какой-то причине вертикальное выравнивание не работает и вообще не выравнивает мои фиктивные логотипы.

Вот мой HTML:

<div class="container box">
                                <div class="row">
                                        <div class="col-lg-4 client-logo-padding">
                                            <a href="" target="_blank" id="designmodo"></a>
                                        </div>

                                        <div class="col-lg-4 client-logo-padding">
                                            <a href="" target="_blank" id="speckyboy"></a>
                                        </div>

                                        <div class="col-lg-4 client-logo-padding">
                                                <a href="" target="_blank" id="pageresource"></a>
                                        </div>

                                        <div class="col-lg-4 client-logo-padding">
                                                <a href="" target="_blank" id="firstwebdesigner"></a>
                                        </div>
                                        <div class="col-lg-4 client-logo-padding">
                                                <a href="" target="_blank" id="codegeekz"></a>
                                        </div>
                                    
                                        <div class="col-lg-4 client-logo-padding">
                                                <a href="" target="_blank" id="webdesignerdepot"></a>
                                        </div>
                                    
                            

                                    </div>
                            

</div>

Вы можете проверить все коды здесь: https://jsfiddle.net/vknremso/

Есть идеи, как я могу этого добиться?

0
Joan Buan 5 Окт 2020 в 06:42

2 ответа

Лучший ответ

Чтобы это работало, необходимо внести несколько изменений:

1. Вы можете использовать классы Bootstrap align-items-center для вертикального центрирования столбцов и text-center для их центрирования по горизонтали:

<div class="row align-items-center text-center">

2. Не используйте фиксированный height для столбцов , так как это влияет на гибкий макет Bootstrap, который выполняет центрирование:

.client-logo-padding {
  /* height: 70px; */    /* <-- Remove this */
  padding-top:15px;      /* use padding to add space between the logos */
  padding-bottom:15px;
}

3. У вас есть ошибка в height для логотипа "designmodo" - у вас есть height: 179px;, что, очевидно, повлияет на макет сетки. Я изменил это на height: 27px; - фактическую высоту изображения.

Рабочий пример: К вашему сведению, я изменил столбцы на col-sm-4, чтобы увидеть результат во фрагменте.

.client-logo-padding {
  padding-top:15px;  
  padding-bottom:15px;
}

.client-logo-padding a{
  display: inline-block;
  background-repeat: no-repeat; 
  margin: 0px auto;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#designmodo {
  width: 163px;
  height: 27px;
  background-image: url('https://i.imgur.com/LtXWVvP.png');

}

#designmodo:hover {
  background-image: url('/assets/images/logo/designmodo-hover.png');
}

#firstwebdesigner {
  width: 94px;
  height: 48px;
  background-image: url('https://i.imgur.com/zdtka18.png');
}

#firstwebdesigner:hover {
  background-image: url('https://i.imgur.com/cufuXaU.png');
}

#codegeekz {
  width: 146px;
  height: 27px;
  background-image: url('https://i.imgur.com/x13IZ8w.png');
}

#codegeekz:hover {
  background-image: url('/assets/images/logo/codegeekz-hover.png');
}

#webdesignerdepot {
  width: 94px;
  height: 48px;
  background-image: url('https://i.imgur.com/spweqh2.png');
}

#webdesignerdepot:hover {
  background-image: url('/assets/images/logo/webdesignerdepot-hover.png');
}

#speckyboy {
  width: 152px;
  height: 35px;
  background-image: url('https://i.imgur.com/7tI9oLb.png');
  background-repeat: no-repeat;
}

#speckyboy:hover {
  background-image: url('https://i.imgur.com/7tI9oLb.png');
}

#pageresource {
  width: 152px;
  height: 26px;
  background-image: url('https://i.imgur.com/1AJZ9YD.png');

}

#pageresource:hover {
  background-image: url('/assets/images/logo/pageresource-hover.png');
}

.box {
  width: 600px;
  border: 2px solid black;
  padding: 60px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container box">
  <div class="row align-items-center text-center">
    <div class="col-sm-4 client-logo-padding">
      <a href="" target="_blank" id="designmodo"></a>
    </div>

    <div class="col-sm-4 client-logo-padding">
      <a href="" target="_blank" id="speckyboy"></a>
    </div>

    <div class="col-sm-4 client-logo-padding">
      <a href="" target="_blank" id="pageresource"></a>
    </div>

    <div class="col-sm-4 client-logo-padding">
      <a href="" target="_blank" id="firstwebdesigner"></a>
    </div>
    <div class="col-sm-4 client-logo-padding">
      <a href="" target="_blank" id="codegeekz"></a>
    </div>

    <div class="col-sm-4 client-logo-padding">
      <a href="" target="_blank" id="webdesignerdepot"></a>
    </div>

  </div>

</div>

Другие примечания

Вам не нужно повторять один и тот же CSS для каждого логотипа - вместо этого вы можете добавить общий CSS в новое правило - это значительно упрощает управление. например

.client-logo-padding a{
    display: inline-block;
    margin: 0px auto;
    /* etc... */
}

Если столбцы с логотипом должны иметь высоту 70 пикселей , это можно сделать следующим образом:

  • удалить правило CSS .client-logo-padding
  • удалите height из CSS для всех логотипов
  • добавьте высоту 70 пикселей в новое правило .client-logo-padding a и центрируйте изображение по вертикали в нем:
    .client-logo-padding a{
        height: 70px;                 /* Set the height */
        background-position: center;  /* Vertically centre the image in the height */
        /* Rest of CSS... */
    }
2
FluffyKitten 5 Окт 2020 в 04:36
<div class="d-flex flex-column">
    <div class="">Item-1</div>
    <div class="">Item-2</div>
    <div class="">Item-3</div>
</div>
-1
Talha Maqsood 5 Окт 2020 в 04:45