垂直对齐漂亮照片窗口到屏幕中心问题答案

【问题标题】：Vertical Align prettyPhoto Window to Center Of Screen Trouble垂直对齐漂亮照片窗口到屏幕中心问题
【发布时间】：2014-03-21 08:36:25
【问题描述】：

我在 Chrome、Mozilla 或 Safari 中将 PrettyPhoto 窗口垂直对齐到屏幕中心时遇到问题。在 IE 中没问题。如果您能说明为什么会发生这种情况以及如何解决它，我会很高兴。

我检查了问题的原因是计算加载的漂亮照片窗口的顶部值。

Chrome、Mozilla、Safari中的相关源代码行：

<div class="pp_pic_holder light_rounded" style="top: 1236.5px; left: 542.5px; display: block; width: 180px;">

IE中相关源码行：

<div class="pp_pic_holder light_rounded" style="left: 542px; top: 199.5px; width: 180px; display: block;">

我还在下面添加了可以帮助您解决问题的源代码部分。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" lang="tr">
<head>
<link rel="stylesheet" href="../css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<link href="../css/tema.css" rel="stylesheet" type="text/css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="../js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="urundetayresim"><ul class="gallery">
<li>
<a href="images/urunler/bu353_1s4.jpg" rel="prettyPhoto[gallery1]"><img src="images/urunler/bu353_1s4.jpg" alt="Bu-353 S4 Usb GPS Alıcısı Sirf Star 4 Chipset" width="240" height="240" /></a>
</li><li>
<a href="images/urunler/bu353_2.jpg" rel="prettyPhoto[gallery1]"><img src="images/urunler/bu353_2.jpg" alt="Bu-353 S4 Usb GPS Alıcısı Sirf Star 4 Chipset" width="240" height="195" /></a>
</li><li>
<a href="images/urunler/bu353_3.jpg" rel="prettyPhoto[gallery1]"><img src="images/urunler/bu353_3.jpg" alt="Bu-353 S4 Usb GPS Alıcısı Sirf Star 4 Chipset" width="240" height="234,146341463" /></a>
</li></ul></div>

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function() {
    jQuery('#urundetaydetaybilgi2').hide();
    //jQuery(".fancybox").fancybox();
    jQuery(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({
    allow_resize: true, /* Resize the photos bigger than viewport. true/false */
    default_width: 500,
    default_height: 344,
    theme: 'light_rounded',
    deeplinking: false  
    });
});
</script>
</body>
</html>

【问题讨论】：

标签： alignment screen center prettyphoto

【解决方案1】：

你真的需要 doctype 来过渡吗？

尝试使用 4.01 严格：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

或简单地使用 HTML 5：

<!DOCTYPE html>

我认为这可能会解决您的问题，而无需编辑 css 或 javascript。

【讨论】：

我不能代表原始海报，但修复 doctype 确实解决了我的问题，感谢 Fabio。