如何在博客滑块中居中图像?

时间:2017-11-19 17:49:56

标签: html css slider blogs

我是这个东西的菜鸟,所以请尽量愚蠢。我正在使用此博客滑块:https://fluoresblog.blogspot.ca/

滑块中的图像被裁剪而不是居中。我想保持幻灯片的大小但是图像居中。我该怎么做?谢谢!

.flexslider ul.slides li .feature_text h2 a {
          color: #fff;
      line-height: 1.2em;
      margin-bottom: 12px;
      display: block;
      font-family: Raleway;
      font-size: 35px;
      font-weight: 400;
      font-style: normal;
      line-height: 1.25;
      letter-spacing: 3px;
      text-transform: uppercase;
    }

.flexslider ul.slides li .feature_text p {
    color:#fff;
    font-size:15px;
    padding:1px 8px;
    display:inline-block;
    margin-bottom:40px;
}

.flexslider ul.slides li .feature_text span.feature_button {
    display:block;
}

.flexslider ul.slides li .feature_text span.feature_button a {
    border:3px solid #FFF;
    color:#FFF;
    padding:11px;
    text-transform:uppercase;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    font-family:Sans-serif;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.3s;
}

.flexslider ul.slides li .feature_text span.feature_button a:hover {
    background:#000;
    color:#fff;
    border:3px solid #FFF;
}

.flexslider ul.slides li .feature_text span.feature_button a i.fa {
    margin-left:1px;
    font-size:14px;
}

/ *** flexslider gallery ** /

.flexslider.gallery {
    margin-bottom:30px;
}

.flexslider .slides a.thumb {
display:block;
height:540px;
overflow:hidden;
position: relative;
}

1 个答案:

答案 0 :(得分:0)

如果将滑块图像作为背景图像放置,请尝试将背景位置css属性设置为" center"。