将图像对齐在中心

时间：2016-12-20 12:37:08

标签： html css

我想将中间的图像对齐为顶部四个，底部三个图像位于同一个div中。

＆＃13;
＆＃13; 
<div id="tiles_menu">
  <div class="view view-tiles-menu view-id-tiles_menu view-display-id-block view-dom-id-bdffce08b72061133c0ad959070833a3">
    <div class="view-content">
      <div class="tiles-menu">
        <div class="submenu-menu nav navbar-nav main-menu" style=""> 
          <div class="views-row views-row-1 views-row-odd views-row-first">
            <a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&amp;Solutions/Omnichannel">
              <div class="innerPageTilesMenu">
                <div class="tilesImage">
                  <img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-strategic-store-solutions.jpg" alt="" width="235" height="228">
                </div>
                <div class="tilesTitle"><p>Omnichannel</p>
                </div>
              </div>
            </a> 
          </div>
          <div class="views-row views-row-2 views-row-even">
            <a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&amp;Solutions/Strategic-Store-Solutions">
              <div class="innerPageTilesMenu">
                <div class="tilesImage">
                  <img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-omnichannel_0.jpg" alt="" width="235" height="228">
                </div>
                <div class="tilesTitle"><p>Strategic Store Solutions</p>
                </div>
              </div>
            </a>
          </div>
          <div class="views-row views-row-3 views-row-odd">
            <a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&amp;Solutions/Merchandise-Operations">
              <div class="innerPageTilesMenu">
                <div class="tilesImage">
                  <img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-Merchandise-Operations.jpg" alt="" width="235" height="228"></div>
                <div class="tilesTitle"><p>Merchandise Operation</p></div>
              </div>
            </a>
          </div>
          <div class="views-row views-row-4 views-row-even">
            <a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&amp;Solutions/Retail-Supply-Chain">
              <div class="innerPageTilesMenu">
                <div class="tilesImage">
                  <img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-Retail-Supply-Chain.jpg" alt="" width="235" height="228"></div>
                <div class="tilesTitle"><p>Retail Supply Chain</p></div>
              </div>
            </a> 
          </div>
          <div class="views-row views-row-5 views-row-odd">
            <a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&amp;Solutions/Predictive-Analytics">
              <div class="innerPageTilesMenu">
                <div class="tilesImage">
                  <img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-Predictive-Analytics.jpg" alt="" width="235" height="228"></div>
                <div class="tilesTitle"><p>Predictive Analytics</p></div>
              </div>
            </a> 
          </div>
          <div class="views-row views-row-6 views-row-even">
            <a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&amp;Solutions/Retail-Test-Automation">
              <div class="innerPageTilesMenu">
                <div class="tilesImage">
                  <img typeof="foaf:Image"                src="http://localhost/AspireInnerWebsite/sites/default/files/tab-Retail-Test-Automation.jpg" alt="" width="235" height="228"></div>
                <div class="tilesTitle"><p>Retail Test Automation</p></div>
              </div>
            </a>
          </div>
          <div class="views-row views-row-7 views-row-odd views-row-last">
            <a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&amp;Solutions/Digital-Services">
              <div class="innerPageTilesMenu">
                <div class="tilesImage">
                  <img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-digital-services.jpg" alt="" width="235" height="228"></div>
                <div class="tilesTitle"><p>Digital Services</p></div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13; 
*  *  *  *
  *  *  *
＆＃13;
＆＃13;
＆＃13;

出于某种目的，我将所有图像都放在单个div中。我希望如明星所示

Users

我创建了小提琴Fiddle Demo

2 个答案:

答案 0 :(得分：3)

您可以使用css3 flexbox。考虑以下css：

.main-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

＆＃13;
＆＃13; 
.tiles-menu {
  width:1024px;
  margin:auto;
}
.tiles-menu .submenu-menu .views-row {
  float:left;	
}
.tilesImage , .tilesTitle{margin:auto;}
.innerPageTilesMenu{padding:4%;}

.main-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
＆＃13; 
<div id="tiles_menu">
  <div class="view view-tiles-menu view-id-tiles_menu view-display-id-block view-dom-id-bdffce08b72061133c0ad959070833a3">
    <div class="view-content">
      <div class="tiles-menu"><div class="submenu-menu nav navbar-nav main-menu" style="">  <div class="views-row views-row-1 views-row-odd views-row-first">
        <a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&amp;Solutions/Omnichannel">
          <div class="innerPageTilesMenu">
            <div class="tilesImage"><img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-strategic-store-solutions.jpg" alt="" width="235" height="228"></div>
            <div class="tilesTitle"><p>Omnichannel</p></div>
          </div>
        </a>  </div>
        <div class="views-row views-row-2 views-row-even">
          <a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&amp;Solutions/Strategic-Store-Solutions">
            <div class="innerPageTilesMenu">
              <div class="tilesImage"><img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-omnichannel_0.jpg" alt="" width="235" height="228"></div>
              <div class="tilesTitle"><p>Strategic Store Solutions</p></div>
            </div>
          </a>  </div>
        <div class="views-row views-row-3 views-row-odd">
          <a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&amp;Solutions/Merchandise-Operations">
            <div class="innerPageTilesMenu">
              <div class="tilesImage"><img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-Merchandise-Operations.jpg" alt="" width="235" height="228"></div>
              <div class="tilesTitle"><p>Merchandise Operation</p></div>
            </div>
          </a>  </div>
        <div class="views-row views-row-4 views-row-even">
          <a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&amp;Solutions/Retail-Supply-Chain">
            <div class="innerPageTilesMenu">
              <div class="tilesImage"><img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-Retail-Supply-Chain.jpg" alt="" width="235" height="228"></div>
              <div class="tilesTitle"><p>Retail Supply Chain</p></div>
            </div>
          </a>  </div>
        <div class="views-row views-row-5 views-row-odd">
          <a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&amp;Solutions/Predictive-Analytics">
            <div class="innerPageTilesMenu">
              <div class="tilesImage"><img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-Predictive-Analytics.jpg" alt="" width="235" height="228"></div>
              <div class="tilesTitle"><p>Predictive Analytics</p></div>
            </div>
          </a>  </div>
        <div class="views-row views-row-6 views-row-even">
          <a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&amp;Solutions/Retail-Test-Automation">
            <div class="innerPageTilesMenu">
              <div class="tilesImage"><img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-Retail-Test-Automation.jpg" alt="" width="235" height="228"></div>
              <div class="tilesTitle"><p>Retail Test Automation</p></div>
            </div>
          </a>  </div>
        <div class="views-row views-row-7 views-row-odd views-row-last">
          <a href="http://localhost/AspireInnerWebsite/services/retail/Consulting&amp;Solutions/Digital-Services">
            <div class="innerPageTilesMenu">
              <div class="tilesImage"><img typeof="foaf:Image" src="http://localhost/AspireInnerWebsite/sites/default/files/tab-digital-services.jpg" alt="" width="235" height="228"></div>
              <div class="tilesTitle"><p>Digital Services</p></div>
            </div>
          </a>  </div>
        </div></div>
    </div>






  </div></div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：3)

将您的css更新为。它应该解决你的问题。

return sub_list

JSFiddle

相关问题
最新问题