时间戳

首页 > 解决方案 > 在引导程序 4 中垂直对齐不同大小的徽标图像

html - 在引导程序 4 中垂直对齐不同大小的徽标图像

问题描述

我正在尝试通过引导程序垂直对齐我所有的虚拟徽标：

但是，由于某种原因，垂直对齐不起作用，根本不会对齐我的虚拟徽标。

这是我的 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/

知道我怎样才能做到这一点吗？

标签： htmlcsstwitter-bootstrap

解决方案

您需要进行一些更改才能使其正常工作：

1. 您可以使用 Bootstrap 类 align-items-center将列垂直居中，并将text-center它们水平居中：

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

2. 不要height对 columns使用 fixed ，因为这会影响进行居中的 Bootstrap flex 布局：

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

height3.你在“designmodo”标志中有一个错误- 你有height: 179px;这显然会影响网格布局。我已将其更改为height: 27px;- 图像的实际高度。

工作示例：仅供参考，我已将 cols 更改为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... */
}

如果徽标列的高度必须为 70px，您可以这样做：

  • 删除.client-logo-paddingCSS 规则
  • height从所有徽标的 CSS 中删除
  • 将 70px 高度添加到新.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... */
    }

推荐阅读