當我在img標籤周圍添加鏈接時，將項目對齊到img元素不起作用

這是我製作的產品，列中的哪些項目與flexbox垂直對齊。這可以在下面的例子中很好地工作，當我添加lightbox（img標籤周圍的標籤）時，它會將img標籤推到div的左邊距。它不再與其他元素中心對齊。你能告訴我爲什麼會發生這種情況，以及如何解決這個問題？當我在img標籤周圍添加鏈接時，將項目對齊到img元素不起作用

這裏的工作原理：

// DISPLAY PRODUCTS for USER/PUBLIC dinamically using a loop and then INSERT into HTML 
    function showProduct() { 
     lblProductList.innerHTML = ""; 

     for (var i = 0; i < ajProductDataFromServer.length; i++) { 

      var lblProduct = '<div class ="lblProduct">' + '<img src="' + ajProductDataFromServer[i].image + '" width="85%" class="lblProductImage" alt="product">' + '<h3 class ="lblProductName">' + ajProductDataFromServer[i].name + '</h3>' + '<h3 class ="lblProductPrice">' + 'Price:' + ' ' + ajProductDataFromServer[i].price + '<h3 class ="lblProductQuantity">' + 'Quantity:' + ' ' + ajProductDataFromServer[i].quantity + '</h3>' + '<button class="btnBuyProduct" data-productId="' + ajProductDataFromServer[i].id + '" >' + 'BUY PRODUCT' + '</button>' + '</div>'; 

      lblProductList.insertAdjacentHTML('beforeend', lblProduct); 
     } 

    }

這裏的問題是：

// DISPLAY PRODUCTS for USER/PUBLIC dinamically using a loop and then INSERT into HTML 

function showProduct() { 

     lblProductList.innerHTML = ""; 

     for (var i = 0; i < ajProductDataFromServer.length; i++) { 

      var lblProduct = '<div class ="lblProduct">' + '<a href="#' + ajProductDataFromServer[i].image + '">' + '<img src="' + ajProductDataFromServer[i].image + '" width="85%" class="lblProductImage" alt="product">' + '</a>' + '<a href="#_" class="lightbox" id="' + ajProductDataFromServer[i].image + '">' + '<img src="' + ajProductDataFromServer[i].image + '">' + '</a>' + '<h3 class ="lblProductName">' + ajProductDataFromServer[i].name + '</h3>' + '<h3 class ="lblProductPrice">' + 'Price:' + ' ' + ajProductDataFromServer[i].price + '<h3 class ="lblProductQuantity">' + 'Quantity:' + ' ' + ajProductDataFromServer[i].quantity + '</h3>' + '<button class="btnBuyProduct" data-productId="' + ajProductDataFromServer[i].id + '" >' + 'BUY PRODUCT' + '</button>' + '</div>'; 

      lblProductList.insertAdjacentHTML('beforeend', lblProduct); 
     } 

    }

我的CSS：

.lblProduct { 
    margin-top: 20px; 
    width: 30vw; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    border: 2px solid lightgrey; 
}

的收藏夾CSS，是否有什麼干擾：

.lightbox { 
    /** Default lightbox to hidden */ 
    display: none; 

    /** Position and style */ 
    position: fixed; 
    z-index: 999; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    top: 0; 
    left: 0; 
    background: rgba(0,0,0,0.8); 
} 

.lightbox img { 
    /** Pad the lightbox image */ 
    max-width: 100%; 
    max-height: 90%; 
    margin-top: 3%; 
} 

.lightbox:target { 
    /** Remove default browser outline */ 
    outline: none; 

    /** Unhide lightbox **/ 
    display: block; 
}

來源

2017-10-15 codeDragon

請包括爲導致問題的元素生成的HTML，以便我們可以真正看到問題可能出在哪裏。 – FluffyKitten

我使用了Chrome的開發工具來查看出了什麼問題，並且出於某種原因顯示錨點填充了lblProduct的寬度。

我想，因爲它全部使用腳本添加，它設置了我看不到的東西。

仍然，並且由於img呈現爲內聯元素，因此在其父級上設置text-align: center將使其居中居中，因此通過添加此規則可以修復問題。

.lblProduct a { 
    text-align: center; 
}

來源

2017-10-15 17:25:12 LGSon

它不會這樣工作，可能你誤解了我。燈箱與.lblProduct無關，就像燈箱打開新圖像一樣。而燈箱的樣式是用於該img，我需要在打開燈箱之前將包含圖像的初始視圖+關於該產品的其他信息的div對齊到中心。這是被扭曲的。 – codeDragon

是的，如果沒有將它看作佈局問題，這可能有點令人困惑。沒有其他規則的錨。燈箱只與上面寫的CSS一起工作。 – codeDragon

@codeDragon錯誤地刪除了我以前的評論。爲了能夠給出正確的答案，我們需要一個工作代碼片段來重現您遇到的問題。 – LGSon

目標封閉div標籤並使其對齊居中。或者，不要使用定位標記，而是將點擊事件監聽器添加到<img>本身。

來源

2017-10-15 17:26:48 Hunter

當我在img標籤周圍添加鏈接時，將項目對齊到img元素不起作用

回答

相關問題