如何將圖像居中在CSS中的頁面中間？

HTML -

<div class="inner"> 
<img src="img/shoplove-design.png" alt="Recipe App" /> 
</div> 

CSS 
.inner { 
width: 800px;   
}

來源

2016-04-24 Adrien

我試過 display：block; margin-left：auto; margin-right：auto; 但似乎並不居中。 – Adrien

你應該給使用水平margin-left:automargin-right:auto的寬度到您的IMG對齊。

.inner { 
    width: 800px; 
    border:1px solid black; 
} 

img{ 
    display:block; 
    margin:0 auto; 
    width:200px; 
}

JSFiddle

或者您也可以通過使inline-block對準IMG並給予text-align:center其父

.inner { 
    width: 800px; 
    border:1px solid black; 
    text-align:center; 
} 

img{ 
    display:inline-block; 
}

JSFiddle

來源

2016-04-24 06:19:01 MOD

這工作。我沒有指定寬度。我將它設置爲90％，這是完美的位置。 – Adrien

嘗試一類附加到你的形象像

<img class="centered" src="img/shoplove-design.png" alt="Recipe App" />

並定義它喜歡：

.centered{width:270px; /* use yours*/ 
      height:150px; /* use yours*/ 
      position:absolute; 
      left:50%; 
      top:50%; 
      margin:-75px 0 0 -135px;} /* use yours divided by 2*/

來源

2016-04-24 06:22:56

，最簡單的解決方案是使用text-align: center;see it in action。

這是可行的，因爲img是div.inner的子女。因此div.inner是它是一個div元素默認情況下它是一個display：block;因此將有一個寬度：100％;它的父母爲。

現在，如果你想說對齊圖像垂直和div.inner將需要顯示：表細胞;它的父母需要是display：table;。

然後垂直對齊圖像就像添加vertical-align：middle;至.inner。

Example Weave:http://kodeweave.sourceforge.net/editor/#fcad28261445fbcae79a9253f502cd2d

來源

2016-04-24 06:34:19

如果您是使用背景圖像OK，你也可以這樣：

<html><head><style> 
html, body {height: 100%} 
body { 
    background-image: url(img/shoplove-design.png); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: contain; 
} 
</style></head><body></body></html>

這給了100頁％高度和顯示中心的圖像。爲了更好地理解CSS的工作原理，我故意沒有縮短CSS語句。

工作的示例： http://codepen.io/anon/pen/bpjZjb?editors=1100

這個解決方案的好處是，它是充分響應，並可以很容易地進行調整，以您的需求。下面是OP的div元素示例：http://codepen.io/anon/pen/BKPbqX?editors=1100

來源

2016-04-24 07:05:56 JoostS

如何將圖像居中在CSS中的頁面中間？

回答

相關問題