用jQuery加載的中心HTML元素

我的計劃如下：
創建一個簡單的靜態網站，其中包含一些基於瀏覽器寬度加載的圖片（因爲移動用戶不需要加載大圖片）。
我嘗試了我在那裏找到的建議：
I'm unable to center an image inside a div after being loaded with jquery
但它似乎不適合我。我嘗試了那裏的答案，但沒有幫助。
我甚至試過這種事後更改屬性：用jQuery加載的中心HTML元素

$('.headerImg').css('margin','auto');

和幾個在太鏈接的想法。但似乎忽略了中心定位。用於測試目的的圖像根據屏幕的寬度正確顯示，並且在我的css文件中沒有多個定義。如果有人有線索，我會真正體會到它...

我的代碼：

<html> 
    <head> 
     <title>broken</title> 
     <!--styling--> 
     <link rel="stylesheet" type="/styling/" href="styles.css"> 
    </head> 

    <body> 
    <!-- Scripts--> 
     <script src="scripts/jquery-3.2.1.min.js"></script> 
     <script type="text/javascript" src="scripts/constants.js"></script> 
     <!-- fetch and store screen sizes--> 
     <script type="text/javascript"> 
      localStorage.setItem("windowWith", screen.width); 
      localStorage.setItem("windowHeight", screen.height); 
      localStorage.setItem("imageSize", getImageSize()); 
     </script> 

     <!--Header--> 
     <div class="header"> 
      <script type="text/javascript"> 
      var path = "media/img/header_" + localStorage.getItem("imageSize") + ".jpg"; 
      $(document).ready(function() { 
       $('.headerImg').attr("src", path); 
      }); 
      </script> 
      <img class="headerImg"></img> 
      <br> 
      <div class)"menuItems"></div> 
     </div> 
     <!--Middle--> 
     <div class="middle"></div> 
     <!--Footer--> 
     <div class="footer"></div> 
    </body> 
</html>

這裏是計算所需要的* .js文件，其畫面選擇的是：

//const enum to define where 
var width = { 
    large:1280, 
    medium:800, 
    small:460, 
    xsmall:330 
}; 

//sets the size for the header image 
function getImageSize(){ 
    var size = ""; 
    var screenWidth = localStorage.getItem("windowWith"); 
    if(screenWidth > width.medium){ 
     console.log("loading large picture"); 
     size = "large"; 
    } 
    else if(screenWidth <= width.medium && screenWidth > width.small){ 
     console.log("loading medium picture"); 
     size = "medium"; 
    } 
    else if(screenWidth <= width.small && screenWidth > width.xsmall){ 
     console.log("loading small picture"); 
     size = "small"; 
    } 
    else if(screenWidth < width.small){ 
     console.log("loading xsmall picture"); 
     size = "xsmall"; 
    } 
    if(size == ""){ 
     size = "xsmall"; 
     console.log("Error - screen size not found - loading xsmall header"); 
    } 
    return size; 
}

來源

2017-06-18 Garamaru

要水平居中然後'顯示：inline-block的; margin：0 auto;'爲你的圖像，'text-align：center;'爲父母應該做的工作。你試過了嗎？並且在'

'你的html語法中有一個錯誤，我希望你已經注意到 –

這裏有一個[link]（https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use -srcset /），它不能解決你的問題，但它比使用jQuery在不同的寬度動態設置不同的圖像更好的方法： –

感謝指出錯誤 - 但風格並沒有解決它。（鏈接）問題中也提到了它們。我也許應該提及我總是在沒有緩存的情況下查看網站。 @ValentinoPereira：它看起來很酷，但它不被M $：Edge和IE支持......所以我必須使用另一種方法。 – Garamaru

圖像標籤是內聯元素，不能以「margin：0 auto;」居中。

製作圖像「display：block;」

你的CSS應該是這樣的：

.headerImg { 
    display: block; 
    margin: 0 auto; 
}

來源

2017-06-18 19:01:33 Olga

可悲的是，它不適合我。我不知道爲什麼它不起作用。我刷新頁面沒有緩存，嘗試隱身模式，並重新啓動我的本地XAMPP（Apache）的情況下，任何緩衝... – Garamaru

忘了設置CSS寬度的圖像。你必須用js來設置它。 – Olga

或更好的解決方案。不要添加任何樣式的圖像，只需將其包裝在div

– Olga

用jQuery加載的中心HTML元素

回答

相關問題