html - 如何在居中对齐容器内的左对齐 div 内居中对齐内容(例如图像)？

Question

如何在左对齐的 div 中居中对齐图像。它保持右对齐(在左对齐的 div 中)。

尝试 position: absolute; margin :自动；尝试覆盖父 div。我什至投入了<span style="text-align:center">进入 HTML，这只会让我的 CSS 陷入困惑。

#background {
  height: 150%;
  background: linear-gradient(to bottom right, #33ff99 30%, #660066 60%);
}

#leftbox {
  float: left;
  background: #ff3399;
  width: 25%;
  height: 280px;
  border: 2px solid #ff3399;
  border-radius: 30px;
  display: block;
  text-align: left;
}

// I even tried adding a child div around the image I want to center as follows (to no avail)

#workshops {
  width: 50%;
  display: block;
  margin: 0;
  padding: 0;
  text-align: center;
}

// The following comes AFTER the issue

#middlebox {
  margin: auto;
  float: left;
  background: #44ff33;
  width: 50%;
  height: 280px;
  border: 2px solid green
    /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  text-align: center;
}

#rightbox {
  float: left;
  background: blue;
  width: 24%;
  height: 280px;
  border: 2px solid blue -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  text-align: center;
}

下面是我在图片上使用的代码:

<!-- id tags--> 
#leftbox { 
   float: left; 
   background: #ff3399 ; 
   width: 25%; 
   height: 280px; 
   border: 2px solid #ff3399; 
   border-radius: 30px; 
   display: block; 
   text-align: left; } 
<!--The accompanying HTML follows--> 
<div id="leftbox"> 
  <a href="link.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','imageURL.jpg',1)"> 
  <img src="imageURL.png" name="Workshops!" width="250" id="Image3" /> 
</div>
</a>
</p>

Answer 1

这应该有效。

img{
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}