【问题标题】:I want to make my images to be align vertical:middle (I am getting my images dynamicly from database.)我想让我的图像垂直对齐:中间(我从数据库中动态获取我的图像。)
【发布时间】:2017-06-15 08:11:07
【问题描述】:
<div class="col-md-3 col-sm-6 col-xs-12 center wow fadeInUp" data-wow-delay="0.2s" style="visibility: hidden; animation-delay: 0.2s; animation-name: none;">
                                <div class="thumb-links" style="width:100%;">
                                    <img src="@item.projectImageURL" alt="@item.projectCompany">
                                </div>                             
                            </div>

和 CSS

.thumb-links {
display: block;
position: relative;
z-index: 2;
text-align: center;
cursor: pointer;
height: 270px;}

@media (max-width: 767px) {
.thumb-links {
    max-width: 370px;
    margin-left: auto;
    margin-right: auto;
}}
.thumb-links img {
height: auto;
vertical-align:middle;
-moz-transition: 0.5s all ease;
-webkit-transition: 0.5s all ease;
-o-transition: 0.5s all ease;
transition: 0.5s all ease;}

图像的宽度和高度彼此不同,我无法正确获取它们。他们将位于拇指链接的顶部。

【问题讨论】:

    标签: html css


    【解决方案1】:

    https://stackoverflow.com/a/37772582/5194515我通过这个链接解决了

    .thumb-links {
    position: relative;
    z-index: 2;
    text-align: center;
    cursor: pointer;
    height: 270px;
    float:left;
    width:270;
    display:flex;
    align-items:center;
    justify-content:center;}
    

    【讨论】:

      【解决方案2】:
      .thumb-links{
           clear: both;
       }
      

      将此 css 属性添加到您的拇指链接。

      【讨论】:

      • 我试过了,但还是一样。我做了 display:inline-block;带有图像高度的选项:自动仍然没有响应。
      • 请给我们一个小提琴或演示。这样任何人都可以调查这个问题
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-09-08
      • 1970-01-01
      • 2015-08-19
      • 2014-03-10
      • 1970-01-01
      • 2016-12-30
      相关资源
      最近更新 更多