2015-07-09 71 views
0

我有一個非常簡單的問題(我甚至知道它爲什麼發生的原因),但我無法將其轉化爲我的代碼。我敢肯定,但我似乎無法動搖,所以我需要一些幫助。爲什麼img可點擊的空間包含整個div?

我有一個想要在我的屏幕上居中定位的圖像。我只希望圖像可點擊,但整個div目前可點擊,並指向我的圖像。我相信這是因爲一個元素固有地內聯,並且我的圖像被設置爲一個塊(fr居中目的),因此整個div變成可點擊的圖像。但是沒有任何東西可以讓我改變我的代碼,使它保持居中,只有img可點擊而不是整個div。我試圖設置邊緣和浮動(除其他外)的顯示,但沒有運氣。任何想法,我的問題發生?謝謝!

HTML:

<div class ="resume"> 
     <p><h2>View Resume:</h2></p> 
      <a href="assets/res.pdf" class="fancybox fancybox.iframe" title="My Resume"><img src="assets/res_preview2.jpg" /></a><br> 
</div> 

CSS:

.resume img{ 
    display: block; 
    margin: 15px auto; 
    box-shadow: 2px 2px 18px #232323; 
} 


.resume h2{ 
    font-size: 2em; 
    font-weight: 700; 
    text-align: center; 
    display: block; 
} 

注:使用的fancybox的PDF作爲一個iframe使用 - 問題是與JPG。

回答

1

,你遇到的問題正在發生,因爲在imgdisplay: block風格。根據一些答案的建議,簡單地將這個display: inline-block刪除你想要的中心。

最簡單的解決方案,因爲它似乎你爲中心的太標題,是去除display: block完全從形象設計,只是添加

.resume { 
    text-align: center; 
} 

你的CSS。你可以在this CodePen中看到這個。父元素上的文本中心基本上集中了所有像文本一樣行爲的子元素(inline-block等)。

如果你真的想中心只有圖像並沒有在div.resume其他的東西,不應該居中,那麼你就需要添加圍繞錨div元素,然後將等,使得元件上的居中文本樣式:

HTML:

<div class ="resume"> 
    <h2>View Resume:</h2> 
    <div class="text-center">   
     <a href="assets/res.pdf" class="fancybox fancybox.iframe" title="My Resume"> 
      <img src="assets/res_preview2.jpg" /> 
     </a> 
    <br> 
</div> 

CSS:

.resume img{ 
    margin: 15px auto; 
    box-shadow: 2px 2px 18px #232323; 
} 

.resume h2{ 
    font-size: 2em; 
    font-weight: 700; 
    text-align: center; 
    display: block; 
} 

.text-center { 
    text-align: center; 
} 

一個div有默認情況下爲樣式,因此它橫跨其包含元素的寬度。讓顯示樣式離開img,然後允許其表現得像一個內嵌元素,它像普通文本一樣居中,而不必跨越包含元素的寬度。


順便說一句,你不應該把標題(例如, h2)段落元素內的元素。嚴格來說,它不是正確的HTML,所以當你使用它瀏覽器(試圖糾正你)會變成這樣:

<p></p> 
<h2>View Resume:</h2> 
<p></p> 

this SO回答。

1

display:inline-block;可能會爲你工作,並可能 .resume img a {所以它稱爲錨點。

2

您可能需要將a標記設置爲blockinline-block,因爲它包含塊級元素(您將圖像設置爲塊)。

.resume a { 
    display: inline-block; 
}