我想将位于同一 div 中的图像居中对齐，即顶部四个图像和底部三个图像。
.tiles-menu{
width:1024px;
margin:auto;
}
.tiles-menu .submenu-menu .views-row{
float:left;
}
.tilesImage , .tilesTitle{
margin:auto;
}
.innerPageTilesMenu{
padding:4%;
}<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&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&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&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&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&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&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&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>出于某种目的，我将所有图像都放在一个 div 中。我要如星号所示
* * * *
* * *
我创建了 fiddle Fiddle Demo
最佳答案
您可以使用 css3 flexbox .考虑以下 CSS:
.main-menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.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;
}<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&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&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&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&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&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&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&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>关于html - 居中对齐图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41242539/