IE中的CSS流体中心定位问题答案

【问题标题】：CSS fluid center positioning issue in IEIE中的CSS流体中心定位问题
【发布时间】：2016-09-19 04:00:20
【问题描述】：

我在 IE（11 及更早版本）中遇到了流畅布局的问题。基本上，图像向远处扩散，而不是应有的居中。这在其他浏览器中运行良好。

我正在使用以下代码：

HTML：

<h2 style="text-align: center;"></h2>
    <div class="newRange">
    <h3 style="text-align: center;">Little Recipes</h3>

      <div class="rangeWrapper">
        <div class="rangeModern">
          <p style="text-align: center;"><strong><a href="http://harlijaigo.co.uk/index.php/product/shabby-chic/">Shabby Chic</a></strong><a  href="http://harlijaigo.co.uk/index.php/product/shabby-chic/"></a></p><img class="rangeImage" src="http://harlijaigo.co.uk/wp-content/uploads/2016/03/6-Nylah-2shabby200.jpg" alt="6-Nylah 2shabby200" width="200" height="289" /></a><p>3 Colour Options, 5 Outfit Choices
    Price Range £15.95-£18.95</p>
    <!--Yellow Blue Pink-->

          </div>
      <div class="rangeModern">
    <h3 style="text-align: center;"></h3>
    <p style="text-align: center;"><strong><a href="http://harlijaigo.co.uk/index.php/product/classic-vintage/">Classic Vintage</a></strong><a href="http://harlijaigo.co.uk/index.php/product/classic-vintage/"></p><img class="rangeImage" src="http://harlijaigo.co.uk/wp-content/uploads/2016/03/1-Thomas-Vintage-200.jpg" alt="1-Thomas Vintage 200" width="200" height="289" /></a><p>3 Colour Options, 5 Outfit Choices
    Price Range £15.95-£18.95</p>
    <!--Yellow/Purple Orange/Green Blue/Red -->

    </div>
    <div class="rangeModern">
    <p style="text-align: center;"><strong><a href="http://harlijaigo.co.uk/index.php/product/hand-written-memo/">Memo</a></strong><a href="http://harlijaigo.co.uk/index.php/product/hand-written-memo/"></p><img class="rangeImage" src="http://harlijaigo.co.uk/wp-content/uploads/2016/03/5-Emily-Memo-200.jpg" alt="5-Emily Memo 200" width="200" height="289" /></a><p>2 Colour Options, 5 Outfit Choices
    Price Range £15.95-£18.95</p>
    <!-- Black/White Black/White with a splash of colour -->

    </div>
    <span class="stretch"></span>
    </div>
    </div>
    <div class="newRange">
    <h3 style="text-align: center;">Newborn Welcome</h3>
    <div class="rangeWrapper">
    <div class="rangeModern">
    <h3 style="text-align: center;"></h3>
    <p style="text-align: center;"><strong>Footprints</strong><a href="http://harlijaigo.co.uk/index.php/product/classic-vintage/"></p><img class="rangeImage" src="http://harlijaigo.co.uk/wp-content/uploads/2016/03/1-Thomas-Vintage-200.jpg" alt="1-Thomas Vintage 200" width="200" height="289" /></a><p>3 Colour Options, 2 Outfit Choices
    Price Range £15.95-£16.95</p>

    </div>
    <div class="rangeModern">
    <p style="text-align: center;"><strong>Delivery Stork</strong><a href="http://harlijaigo.co.uk/index.php/product/hand-written-memo/"></p><img class="rangeImage" src="http://harlijaigo.co.uk/wp-content/uploads/2016/03/5-Emily-Memo-200.jpg" alt="5-Emily Memo 200" width="200" height="289" /></a><p>3 Colour Options, 2 Outfit Choices
    Price Range £15.95-£16.95</p>

    </div>
    <span class="stretch"></span>
    </div>
    </div>
    <div class="newRange">
    <h3 style="text-align: center;">Summer Range</h3>
    <div class="rangeWrapper">
    <div class="rangeModern">
    <h3 style="text-align: center;"></h3>
    <p style="text-align: center;"><strong><a href="http://harlijaigo.co.uk/index.php/product/classic-vintage/">Classic Vintage</a></strong><a href="http://harlijaigo.co.uk/index.php/product/classic-vintage/"></p><img class="rangeImage" src="http://harlijaigo.co.uk/wp-content/uploads/2016/03/1-Thomas-Vintage-200.jpg" alt="1-Thomas Vintage 200" width="200" height="289" /></a><p>Yellow/Purple
    Orange/Green
    Blue/Red</p>

    </div>
    <span class="stretch"></span>
    </div>
    </div>

CSS：

.newRange
{
 width:100%; 
}

.rangeWrapper {
       text-align: center;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.rangeModern {
  width:200px;
  height:480px;
  margin:10px;
   vertical-align: top;
    display: inline-block;
    *display: inline;

}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

请看这个 JSFiddle：

https://jsfiddle.net/afnguyen/qzzrkc4w/1/

任何帮助将不胜感激。

【问题讨论】：

标签： css internet-explorer responsive-design fluid-layout

【解决方案1】：

好的，在检查 IE 中的元素并编辑 css 时偶然发现了解决方案。通过删除以下内容：

.rangeWrapper {
       text-align: center;
    /*-ms-text-justify: distribute-all-lines;  REMOVED THESE TWO LINES
    text-justify: distribute-all-lines;*/
}

它现在可以跨浏览器（包括 IE）和跨设备运行

【讨论】：