居中圖片使用CSS（無顯示：塊）

img.imgdemo { 
 
    background: white; 
 
    width: 65%; 
 
    margin: auto; 
 
}

<a class=imagelink href=periodictable.htm> 
 
    <img class=imgdemo src=ptabledemo.png> 
 
</a>

我試圖中心也作爲一個鏈接的圖像，但是當它顯示的風格：塊，它的作用作爲一個塊元素，使其中的所有元素都成爲一個鏈接。有沒有什麼辦法解決這一問題？

來源

2015-12-20 Rocky

你能提供你正在嘗試什麼樣的代碼？ –

剛剛做到了。當顯示：塊;這是我剛剛提到的。 – Rocky

我認爲@ dwreck08意味着**工作**代碼。也許是與該圖像的絕對鏈接？ –

一種選擇是transform: translate()財產，並給予a.imagelinkdisplay: inline-block。這將讓你設置圖像的大小，以任何你想要的，並確保鏈接是相同的大小，在任何時候都撐中心：

JS Fiddle

a.imagelink { 
    display: inline-block; 
    background: blue; 
    position: relative; 
    left: 50%; 
    transform: translateX(-50%); 
} 
img { 
    width: 50%; 
    display: block; 
}

來源

2015-12-20 22:39:02

謝謝！完美的作品！ – Rocky

圖片會直接文本一樣，所以：你可以使用

.imagelink { 
    text-align:center; 
}

來源

2015-12-20 22:38:43 Rob

如果圖像是200像素

img { 
    width: 200px; 
    margin-left: calc(50% - 200px/2); 
}

如果圖像是65％

img { 
    width: 65%; 
    margin-left: calc(50% - 65%/2); 
}

來源

2015-12-20 22:52:39

居中圖片使用CSS（無顯示：塊）

回答

相關問題