CODEWITHSUNDEEP
htmlcssalignment
Tami_J
Tami_J

Reputation: 11

How to center align content (e.g., image) inside a left aligned div inside a center aligned container?

How to center-align an image in a left-aligned div. It keeps aligning RIGHT (in the left aligned div).

Tried: Everything from position: absolute; to margin: auto; to attempts to override the parent div. I even threw in <span style="text-align:center"> into the HTML and that merely threw my CSS into utter chaos.

#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;
}

Below is the code I use on the image:

<!-- 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>

Upvotes: 0

Views: 48

Answers (1)

Geetanjali
Geetanjali

Reputation: 468

This should work.

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

Upvotes: 1

Related Questions