同一DIV中的两种不同图像行为

Question

我目前正在为客户开发一个网站，基于一个名为＆＃39; moderna＆＃39; (link)的主题。

正如你在链接上看到的那样，有一个灰色的文本框悬停在滑块上，我把它填满图像的整个宽度，然后我将文本水平居中在中间，我想添加并将象形图放在此框中的每个文本上，如下所示：

我遇到的问题是目前图标与中间不对齐。 我认为这是因为这行代码使滑块的背景图像成为网站的宽度（响应）：

.flexslider .slides img { width: 100%; display: block;}

当我关闭它时，旨在使图标居中/缩放的代码行完美地工作。但是，当然，我无法删除或修改滑块代码的这一部分，因为每当我这样做时，它就会停止响应或停止100％宽度。

以下是我所拥有的：

＆＃13;

＆＃13;

#featured .flexslider {
  padding: 0;
  margin: 50px 0 30px;
  background: #fff;
  position: relative;
  zoom: 1;
}
.flex-caption {
  background: none;
  -ms-filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#4C000000, endColorstr=#4C000000);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#4C000000, endColorstr=#4C000000);
  zoom: 1;
}
.flex-caption {
  bottom: 0px;
  background-color: rgba(12, 85, 154, 0.8);
  color: #fff;
  margin: 0;
  padding: 25px 25px 25px 30px;
  position: absolute;
  right: 0;
  width: 100%;
}
.flex-caption h3 {
  color: #fff;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.flex-caption p {
  margin: 0 0 15px;
}

＆＃13;

<!-- start slider -->
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <!-- Slider -->
      <div id="main-slider" class="flexslider text-center">
        <ul class="slides">
          <li>
            <img src="http://bootstraptaste.com/theme/moderna/img/slides/1.jpg" alt="" />
            <div class="flex-caption">
              <h3><img src="http://sstatic.net/stackexchange/img/logos/sf/sf-icon.png?v=6c3100d858bb" style="width:70px;height:70px;" />
                <br>Residential Services</h3> 
              <p>Duis fermentum auctor ligula ac malesuada. Mauris et metus odio, in pulvinar urna</p>
              <a href="#" class="btn-medium btn-theme">Learn More</a>
            </div>
          </li>
          <li>
            <img src="http://bootstraptaste.com/theme/moderna/img/slides/2.jpg" alt="" />
            <div class="flex-caption">
              <h3><img src="http://sstatic.net/stackexchange/img/logos/careers/careers-icon.png?v=0288ba302bf6" style="width:70px;height:70px;" />
                <br>Commercial Services</h3> 
              <p>Sodales neque vitae justo sollicitudin aliquet sit amet diam curabitur sed fermentum.</p>
              <a href="#" class="btn-medium btn-theme">Learn More</a>
            </div>
          </li>
          <li>
            <img src="http://bootstraptaste.com/theme/moderna/img/slides/3.jpg" alt="" />
            <div class="flex-caption">
              <h3><img src="http://sstatic.net/stackexchange/img/logos/sf/sf-icon.png?v=6c3100d858bb"  style="width:70px;height:70px;" />
                <br>GoGreen Services</h3> 
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit donec mer lacinia.</p>
              <a href="#" class="btn-medium btn-theme">Learn More</a
    </div>
            </div>
          </li>
        </ul>
    </div>
<!-- end slider -->

＆＃13;

＆＃13;

＆＃13;

.png图片是我想要居中的图标。 但是，如果我更改此div中图像的CSS，滑块图像也会更改。 我已经能够将图标放在中心，滑块不是全宽，或者滑块的背景图像工作正常，但图标是全宽的（非常大）或者刚刚与文本框架的左侧对齐。

我还没有能够在不破坏外观的情况下为图标添加div。

我想知道如何对此进行编码，以便同一div中的这两个图像可以表现/显示不同，但不能抵消彼此的特征/外观。谢谢！

Answer 1

我认为应该这样做：

.flexslider .slides .flex-caption img {
    width: auto;
    display: inline;
}

然后插入字幕框（灰色框）的图像应为原始尺寸（不是100％）。

修改

同时添加display: inline;

Answer 2

  

我检查了库FlexSlider.css并清理了一些无用的东西   行，并添加一个相关链接的片段，以获得一个很酷的演示。

您的position: absolute有.slides li与视口相关，与我们想要的position: relative无关。 将.flexslider .slides li { position: relative; } 设置为幻灯片。

display: inline

要使您的flex-caption图像居中，您有两个解决方案：

• text-align:center＆amp;＆amp; text-center

  

通过将引导类.flexslider设置为div   text-align: center，您应用了适当的display: inline   让具有礼仪的儿童元素.flexslider .slides .flex-caption img集中在一起。

因此，在您的情况下，您只需添加display: inline适当性.flexslider .slides .flex-caption img { width: 70px; height: 70px; display: inline; } 。

display: block

• margin-left: auto; margin-right: auto＆amp;＆amp; display: block

您也可以将图像设置为margin-left: auto; margin-right: auto;并将其应用于他：.flexslider .slides .flex-caption img { width: 70px; height: 70px; margin-left: auto; margin-right: auto; display: block; }

    .flexslider {
      margin-top: 50px;
      margin-bottom: 30px;
    }
    .flexslider .slides .flex-caption {
      position: absolute;
      width: 100%;
      right: 0;
      bottom: 0;
      background: rgba(12, 85, 154, 0.5);
      -ms-filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#4C000000, endColorstr=#4C000000);
      filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#4C000000, endColorstr=#4C000000);
      zoom: 1;
      color: #fff;
      margin: 0;
      padding: 25px 25px 25px 30px;
    }
    .flexslider .slides .flex-caption h3 {
      color: #fff;
      letter-spacing: 1px;
      margin-bottom: 8px;
    }
    .flexslider .slides .flex-caption p {
      margin: 0 0 15px;
    }
    .flexslider .slides li {
      position: relative;
    }
    .flexslider .slides .flex-caption img {
      width: 70px;
      height: 70px;
      display: inline;
    }

  

请在你的html中避免css内联并将其设置在css上（参见css中的高度和宽度）

演示：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/woothemes/FlexSlider/master/flexslider.css">
  </head>
  <body>
    <!-- start slider -->
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <!-- Slider -->
          <div id="main-slider" class="flexslider text-center">
            <ul class="slides">
              <li>
                <img src="http://bootstraptaste.com/theme/moderna/img/slides/1.jpg" alt="" />
                <div class="flex-caption">
                  <h3><img src="http://sstatic.net/stackexchange/img/logos/sf/sf-icon.png?v=6c3100d858bb" alt="Residential Services Icon" />
                    <br>Residential Services</h3> 
                  <p>Duis fermentum auctor ligula ac malesuada. Mauris et metus odio, in pulvinar urna</p>
                  <a href="#" class="btn-medium btn-theme">Learn More</a>
                </div>
              </li>
              <li>
                <img src="http://bootstraptaste.com/theme/moderna/img/slides/2.jpg" alt="" />
                <div class="flex-caption">
                  <h3><img src="http://sstatic.net/stackexchange/img/logos/careers/careers-icon.png?v=0288ba302bf6" alt="Commercial Services Icon" />
                    <br>Commercial Services</h3> 
                  <p>Sodales neque vitae justo sollicitudin aliquet sit amet diam curabitur sed fermentum.</p>
                  <a href="#" class="btn-medium btn-theme">Learn More</a>
                </div>
              </li>
              <li>
                <img src="http://bootstraptaste.com/theme/moderna/img/slides/3.jpg" alt="" />
                <div class="flex-caption">
                  <h3><img src="http://sstatic.net/stackexchange/img/logos/sf/sf-icon.png?v=6c3100d858bb" alt="GoGreen Services Icon" />
                    <br>GoGreen Services</h3> 
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit donec mer lacinia.</p>
                  <a href="#" class="btn-medium btn-theme">Learn More</a
        </div>
                </div>
              </li>
            </ul>
        </div>
    <!-- end slider -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/woothemes/FlexSlider/master/jquery.flexslider.js"></script>
    <script type="text/javascript">
      (function($){
        $(window).load(function() {
          $('.flexslider').flexslider({
            animation: "slide"
          });
        });
      })(jQuery); 
    </script>
  </body>
</html>

app.js