CSS標記不會顯示在頁面中心

我是一個css新手，我正在使用DRUPAL（CMS）來設計我的網站。我已經能夠使用該標籤來居中圖像：CSS標記不會顯示在頁面中心

#block-imageblock-4{ 
    width:25.5%; 
    height:10%; 
    text-align:center; 
    margin-top:1%; 
    margin-bottom:1%; 
    margin-left:37%; 
    margin-right:36.5%; 
}

所以，如果屏幕分辨率1366px768px（最大#page）或更大＃塊imageblock-4停留在頁面的中心。

WELL在另一個頁面上我有兩個帶有兩個標籤的圖像。我用這個CSS把它們並排放置。

#block-imageblock-17,#block-rotating-banner-1{ 
    display:block; 
    width:auto; 
    margin-left:2%; 

}

有各個標籤：

#block-imageblock-17{ 
    width:15%; 
    float:left; 
    margin-top:1%; 
    margin-left:3%; 
    margin-right:1.5%; 
    margin-bottom:5%; 
} 

#block-rotating-banner-1 { 
    margin-right:-30%; 
    margin-top:1%; 
    margin-bottom:10%; 
    float:left; 
    background-repeat:no-repeat; 
    width:26%; 
    height:180px; 
    max-width:100%; 
    min-height:100%; 
    background-image:url("/sites/default/files/imgs/ArtistFrame.png"); 
}

然而，如果屏幕分辨率比1366px較大由768px然後圖像被不居中。這就是我的問題。

我注意到，如果我拿出所有的浮動和利潤率出兩個標籤，並把這樣的兩個元素：

#block-imageblock-17,#block-rotating-banner-1 { 
    display:block; 
    width:auto; 
    text-align:center; 
    margin-top:1%; 
    margin-bottom:1%; 
    margin-left:37%; 
    margin-right:36.5%; 
}

兩個圖像居中，但是不接近對方。

任何建議可以將兩個圖像並排放置在頁面中央，如標籤#block-imageblock-4？

來源

2014-01-20 Benjamin Jones

可能重複的[中間圖像元素在父div]（http://stackoverflow.com/questions/18428997/center-image-element-in-parent-div） –

爲什麼你編輯標籤？我正在用Drupal創建這個網站。應該使用drupal標記 –

這是一個CSS問題，它與任何內容管理系統（如drupal）無關。 –

嘗試將圖像包裝在<div>標記中，並使用margin: 0 auto;將div居中。像這樣

CSS

.centerDiv { margin: 0 auto;}

HTML

<div class="centerDiv"> 
<img src="urlhere" /> 
... 
</div>

來源

2014-01-20 23:25:20 Auzi

.centerDiv需要明確定義其寬度 –

我正在使用Drupal（CMS）。所以這將不起作用 –

如果您有權訪問網站模板，則可以修改html塊並添加div html以包圍該塊。（假設你在一個塊中做）。如果我沒有記錯，它應該是'.tpl.php'文件，但它已經有一段時間了。除此之外，你只需要用正確的居中標記更新CSS，而不是使用當前使用的基於％的標記。 – Auzi

試試這個：

img { 
    height: 250px; 
    left: 50%; 
    margin-top: -125px; 
    margin-left: -125px; 
    position: absolute; 
    top: 50%; 
    width: 250px; 
}

多的位置：

http://www.paulund.co.uk/absolute-center-images-with-css

來源

2014-01-20 23:31:38 wpdaniel

div 
{ 
    margin: 0 auto; 
    width: 100px; 
} 
img 
{ 
    width: 100px; 
}

「margin：0 auto;」元素的寬度需要明確定義其寬度。看到JSFiddle

來源

2014-01-20 23:36:05

CSS標記不會顯示在頁面中心

回答

相關問題