使用jquery將圖像添加到div中的中心

我使用crossSlide jquery插件進行幻燈片演示。我的容器比內部的圖像大，所以圖像的傾向位於左側。有沒有辦法將它們定位到容器的中心？使用jquery將圖像添加到div中的中心

這裏是使用crosSlide的示例站點，因爲我沒有網站上傳我的示例頁面。

http://www.hashbangcode.com/blog/crossslide-jquery-plugin-test-348.html

來源

2010-05-19 text

確定元素的使用jQuery中心：

如果你知道父母的innerWidth，你可以決定你需要應用來實現左側位置的元素的innerWidth一個「中央」。

$("#crossslide img").each(function() { 
    // let cl be (half parent width) - (half element width). 
    cl = ($(this).parent().innerWidth()/2) - ($(this).innerWidth()/2); 
    // we can set the left position to that value to achieve center 
    $(this).css("left", cl); 
});

你可能會想執行這個結果和改變顯示端口的尺寸的處理功能相關聯。

來源

2010-05-19 04:04:46 Gabriel

這不會工作。圖像在裝入容器時使用絕對定位。它們將始終位於父容器的（0,0）處。 – prodigitalson 2010-05-19 04:06:36

謝謝@prodigitalson，我已經修改了我的答案，以說明插件的性質。 – Gabriel 2010-05-19 04:16:06

您可能需要更改插件才能執行此操作。我可以肯定，沒有看到你想要完成的事情。但是，這可以使用圖像的絕對位置。然而，這似乎依賴於提供位置來源的容器 - 例如。圖像始終位於容器的（0,0）處。

這個插件似乎沒有辦法讓你以簡單的方式改變它。但是，如果你看看"Ken Burns Effect"的選項，它似乎有辦法做到這一點。是否有可能配置一組選項，以產生你不想要的效果，但這將是我的出發點。

來源

2010-05-19 04:08:37 prodigitalson

位置：「絕對」，知名度：「隱藏」，對齊：「中心」 //頂：0，// 左：0 我發現它的劇本，我評論的頂部和左側，更換他們與中心對齊，但它將圖像推向右側。 – text 2010-05-19 04:19:32

'align'不是一個vaild屬性。你需要使用'text-align：center;'不管怎麼樣都不會工作，因爲你將它設置在圖像上，不需要圖像的父級，這是'text-align'需要應用的。然而你可以將圖像設置爲'display：block;保證金：0汽車;'這可能會正確地居中...... – prodigitalson 2010-05-19 06:27:05

這裏是jQuery的他們在準備功能加載之後應用到您的容器：

var xSlideWidth = $('#crossslide').width(); 
var xSlideHeight = $('#crossslide').height(); 

$('#crossslide').find('img').each(function(i,obj) { 
    var objXdiff = (xSlideWidth - $(obj).width())/2; 
    var objYdiff = (xSlideHeight - $(obj).height())/2; 

    $(obj).css({ 'left':objXdiff+'px', 'top':objYdiff+'px' }); 
});

通過包含在#crossslide中的每個圖像基本上去計算多遠定位top和left（絕對相對於#crossslide而定位）根據其多小。

來源

2010-05-19 04:17:43 mVChr

我有同樣的問題，所以我搜索了jquery.cross-slide.min.js文件「左」，發現這部分代碼：

.css({position:"absolute",visibility:"hidden",top:0,left:14,border:0})

我編輯的左側位置，它爲我工作。

來源

2012-12-23 09:27:24

使用jquery將圖像添加到div中的中心

回答

相關問題