当我在 img 标签周围添加链接时，将项目居中对齐对 img 元素不起作用

Question

这是我动态生成的产品，列中的项目与 flexbox 垂直对齐。 这在下面的示例中工作正常，但是当我向它添加灯箱（img 标签周围的标签）时，img 标签被推到 div 的左边距。 它不再与其余元素居中对齐。 你能告诉我为什么会发生这种情况以及如何解决吗？

这里工作：

  // 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;
}   

Answer 1

我使用 Chrome 的开发工具查看出了什么问题，并且出于某种原因显示锚点填充了lblProduct的宽度。

我想，因为这一切都是使用脚本添加的，所以它设置了一些我看不到的东西。

尽管如此，当img呈现为内联元素时，在其父级上设置text-align: center将使其水平居中，因此通过添加此规则可以解决问题。

.lblProduct a {
    text-align: center;
}

Answer 2

定位封闭 div 标签并使其与中心对齐。 或者不使用锚标记，而是将 click 事件侦听器添加到<img>本身。