Question

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

尝试过：位置上的所有内容：绝对；保证金：自动；尝试覆盖父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%);
}

如何将内容（例如图片）在居中对齐容器内的左对齐div内居中对齐？

1 个答案: