当我在 img 标签周围添加链接时，将项目对齐到中心不适用于 img 元素答案

【问题标题】：Align items to center doesn´t work on the img element when I add a link around the img tag当我在 img 标签周围添加链接时，将项目对齐到中心不适用于 img 元素
【发布时间】：2018-03-27 05:41:04
【问题描述】：

这是我动态生成的产品，列中的项目与 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;
}

【问题讨论】：

请包括为导致问题的元素生成的 HTML，以便我们可以实际看到问题所在。

标签： javascript html css image flexbox

【解决方案1】：

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

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

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

.lblProduct a {
    text-align: center;
}

【讨论】：

这样不行，你可能误解了我的意思。灯箱与 .lblProduct 无关，因为它打开了一个新图像。灯箱的样式是针对那个 img 的，在打开灯箱之前，我需要将包含图像初始视图的 div 与产品的其他信息对齐到中心。这就是被扭曲的原因。
是的，如果不将其视为布局问题，这可能会有点令人困惑。锚点没有其他规则。灯箱仅适用于上面编写的 CSS。
@codeDragon 误删了我之前的评论。为了真正能够给出正确的答案，我们需要一个工作代码 sn-p 重现您遇到的问题。
@codeDragon 首先，该网页的图像居中，其次，您应该在问题中添加一个最小工作代码sn-p，而不是作为外部链接，因为没有人想解析完整的网站代码。
真棒。 :) 非常感谢。

【解决方案2】：

定位包含 div 标签并使其居中对齐。或者不使用锚标记，而是将点击事件侦听器添加到<img> 本身。

【讨论】：