javascript - 当我在 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 的开发工具查看出了什么问题，出于某种原因它显示 anchor 填充了 lblProduct 的宽度。

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

不过，由于 img 呈现为内联元素，在其父元素上设置 text-align:center 会使其水平居中，因此通过添加此规则可以修复问题。

.lblProduct a {
    text-align: center;
}