Question

我想在“左”div中垂直居中一个图像（也是一个链接）。

<td maxwidth-300>
'order|confirmed' email updated with status 'Complete'. (Email ID: 833)

Subject: Order Confirmation: Order 11-001270 for Anna's Flower Shoppe
From: Company 
Reply-to: blah@blahblah.com 
To: emailaddress@emailaddress.com
Cc: emailaddress@emailaddress.com </td>

a {
  outline: 0;
}

.main {
  background: red;
  position: relative;
  display: inline-block;
  width: 400px;
  height: 200px;
}

.left {
  position: absolute;
  width: 20%;
  height: 100%;
}

注1：在我的真实页面中，.main的宽度/高度未知。

注意2：我已经删除了我在上述代码中居中的所有尝试，以免引起混淆： - ）

注3：我已经测试了网上发现的很多东西，但在我的情况下都没有。

Answer 1

您可以使用：

.left{
    display: flex;
    align-items: center;
}

Answer 2

您可以将.left中的链接与现有标记/ css垂直对中，方法是将.left中的链接绝对定位在top: 50%，然后使用translateY(-50%)将其移回它高出50％的高度，所以它真正垂直居中。

.left a {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

a{
  outline:0;
}
.main{
  background:red;
  position:relative;
  display:inline-block;
  width:400px;
  height:200px;
}
.left {
  position:absolute;
  width:20%;
  height:100%;
}

.left a {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

img {
  max-width: 50px;
}

<body>
  <div class="main">
    <div class="left">
      <a href="left.png">
        <img src="https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg">
      </a>
   </div>
  </div>
</body>

垂直居中指向div中图像的链接

2 个答案: