如何保持圖像的中心和響應？

我有一個形象，既爲中心，水平和垂直如何保持圖像的中心和響應？

#logo01{ 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin-top:-146px; // half of height 
    margin-left:-229px; // half of width 
    cursor:pointer; 
}

現在我需要一個響應式設計，所以：

#logo01{ 
    max-width:45%; 
    max-height:45%; 
}

它的工作原理，但位置丟失。我怎樣才能保持圖像的中心和響應在同一時間？

來源

2013-08-06 bonaca

嘗試使用margin-left：auto;您正在測試哪個瀏覽器的 – Tdelang

？ – Akki619

@ Akki619，firefox 22 – bonaca

的height和width值這是圍繞一個骯髒的方式：

JSFiddle

<div class="shadow"><img class="logo" src="http://placehold.it/1000x1000" /></div>

div.shadow { 
    position:absolute; 
    max-width:45%; 
    max-height:45%; 
    top:50%; 
    left:50%; 
    overflow:visible; 
} 
img.logo { 
    position:relative; 
    max-width:100%; 
    max-height:100%; 
    margin-top:-50%; 
    margin-left:-50%; 
}

的技巧是使用div.shadow作爲「維度持有人」，所以百分比可以工作。

我把它稱爲髒，因爲陰影div仍然有一定的空間，這將阻止鼠標指向它下面的東西。你可以使用pointer event來解決這個問題，但是IE會被留下，而且圖像本身也不會被指示。

來源

2013-08-06 10:07:38 Passerby

路人後它不是垂直居中，似乎解決了。但是，我不知道我必須使用這個技巧來完成這麼簡單的任務。無論如何，非常感謝。 – bonaca

@SunSky我不會在CSS中調用垂直對齊「簡單地」... – Passerby

請嘗試下面的CSS爲圖像的容器。

CSS：

width: 100%; text-align: center; margin-top:50%

來源

2013-08-06 09:29:35 Akki619

Akki619，容器是'body'，它已經100％和'text-align：center'。空白頂部50％不會垂直居中圖像。 – bonaca

可以設置一個小提琴嗎？ – Akki619

試試這個

http://jsfiddle.net/hAH6u/2/

#logo01{ 
    position:absolute; 
    top:50%; 
    left:50%; 
    cursor:pointer; 
    max-width:45%; 
    max-height:45%; 
    display:table; 
}

來源

2013-08-06 09:41:53 falguni

Fags，你的解決方案適用於'div'，但不適用於'img'標籤。 – bonaca

您可以使用display:table和display:table-cell財產來實現這一目標。

HTML：

<div id='logo_container'> 
    <h1 id='logo'><img src = 'http://s18.postimg.org/rwpoh1vo9/forbidden.jpg' alt = 'Logo'/></h1> 
</div>

CSS

#logo_container { 
    display:table; 
    height:100px; 
    width:100px; 
    margin:0 auto; 
    text-align:center; 
    border:1px solid #333; 
} 

#logo { 
    display:table-cell; 
    vertical-align:middle; 

} 
#logo img { 
    max-height:80%; 
    max-width:80%; 
}

這裏是小提琴：http://jsfiddle.net/Qe2vG/

你可以看到，對齊圖像中央垂直。另外在響應風格的情況下，只是改變的#logo_container

來源

2013-08-06 09:53:09

kalpesh，你說：在響應式風格的情況下，只需更改#logo_container的高度和寬度值。在這種情況下，我寧願改變標誌本身的大小。但我不能。自適應設計不包括固定的寬度和高度。萬一我錯了，請讓你的小提琴響應。 – bonaca

@SunSky：如果您給出#logo_container的高度和寬度百分比，那麼它也可以工作。你可以在這裏查看：http://jsfiddle.net/Qe2vG/1/。嘗試重新調整瀏覽器並檢查。 –

kalpesh，我嘗試了你的新小提琴並調整了窗口大小。 'logo_container'沒有調整大小。它變得切割。並且在調整大小 – bonaca

如何保持圖像的中心和響應？

回答

相關問題