在div中垂直對齊圖像的問題
[英]Issue with vertically aligning image in div
問題描述
我知道有多種方法可以在div中垂直對齊圖像，如此處已指出的： 如何在div中垂直對齊圖像
不過，從我自己的測試來看，我很好奇為什么粘貼到.htm文件並在Chrome 39或IE 11中打開時，下面的內容似乎不對齊，但是在JSFiddle中可以正常工作： http：// jsfiddle達網絡/ 4RPFa / 6908 /
我完全缺少什么東西嗎？
謝謝。
<html>
<head>
<title>test</title>
</head>
<body>
<div style="height: 300px; line-height: 300px;background-color:green;">
<img width="70" height="70" style="vertical-align:middle; background-color:blue;" alt="" src="image.png">
</div>
</body>
</html>
2 個解決方案
解決方案1
0 2014-12-06 18:44:56
我過去垂直對齊的最佳方法是
position:absolute;
top:0;
bottom:0;
margin:auto;
它可以在IE（甚至8和7）和其他東西中工作，為什么不試試呢？
如果要絕對中心，請使用
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
..這將解決問題
PS：有人問為什么這是最好的方法，沒有機會看到它是誰，這個問題被迅速刪除了……我的回答很簡單，我從未遇到過這種方法有任何奇怪的行為或異常情況，所以，對我來說，這是一種簡單，容易且基本的方法，因此是最好的。
解決方案2
0 已采納 2014-12-06 18:46:57
在此特定情況下，它在小提琴之外呈現不同的原因是由於它們使用<!DOCTYPE html> ，而您正在使用<html> （怪癖模式）。 隨時嘗試。
您可以在這里閱讀更多有關怪癖模式的怪異信息： http : //www.cs.tut.fi/~jkorpela/quirks-mode.html
Div垂直對齊圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.