如何在居中对齐容器内的左对齐 div 内居中对齐内容（例如图像）？答案

【问题标题】：How to center align content (e.g., image) inside a left aligned div inside a center aligned container?如何在居中对齐容器内的左对齐 div 内居中对齐内容（例如图像）？
【发布时间】：2019-12-26 19:10:43
【问题描述】：

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

试过了：一切都来自位置：绝对；到保证金：自动；试图覆盖父 div。我什至在 HTML 中加入了<span style="text-align:center">，这只会让我的 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>

【问题讨论】：

这些只是类，对吗？向我们展示您希望对象居中的正文中的代码。
#leftbox { float: left;背景：#ff3399；宽度：25%；高度：280px；边框：2px 实心#ff3399;边框半径：30px；显示：块；文本对齐：左； }
link.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','@ 987654322@)">
@Tami_J 你能编辑这个小提琴来显示你的确切标记是什么吗？ jsfiddle.net/ajrms031
第一个？感谢您的回复。 revampshebang.com。您可以查看那里的实际代码。这是我要修复的最左边的粉红色框（顶部带有“workshops”字样的灰色西装图像不在粉红色框中居中）。 ...右键单击图像并选择“检查”以查看标记。我只是想将该图像居中！

标签： html css alignment

【解决方案1】：

这应该可行。

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

【讨论】：

有趣！我没用过 tronsform: translate！感谢您的评论。