CODEWITHSUNDEEP
htmlcss
HelloWorld1
HelloWorld1

Reputation: 14108

Picture in the middle and center of DIV

Goal:
The picture should be in the center and middle inside of the div test1 and test 2 with the same source code.

Problem:
What part am I missing in order to make it to be middle and the weight of test1 and test2 can be different.

Thank you!

#parent {
  display: flex; /* equal height of the children */
}

#test1 {
  border-right: 1px solid black;    
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;

  background: white;
  width: 100px;
  height: 400px;
  padding:15px 15px 15px 15px;

  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;

  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;

  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  
  
  flex: 1; /* additionally, equal width */
}

#test2 {
  border-right: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;

  background: white;
  width: 100px;
  height: 200px;
  padding:15px 15px 15px 15px;

  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;

  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;

  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  
  flex: 1; /* additionally, equal width */
}

img {
	margin-left: auto;
	margin-right: auto;
    margin-top: 25px;	
	display: block;


	
    height: auto;
	position: relative;
}
.helper {

    vertical-align: middle;
}
	<div id="parent">  
		<div id="test1">
			<img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">		
		</div>
		<div id="test2">
			<img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">		
		</div>
	</div>

Upvotes: 1

Views: 73

Answers (4)

Terry
Terry

Reputation: 66188

Solution 1: Use CSS transform

One way is to use position: relative on the parent element (i.e. #test1 and #test2), and then position the image halfway from the top and left of the parent, and then offset it upwards and leftwards by half of its computed height:

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


#parent {
  display: flex;
  /* equal height of the children */
}

#test1 {
  border-right: 1px solid black;
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background: white;
  width: 100px;
  height: 400px;
  padding: 15px 15px 15px 15px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  flex: 1;
  /* additionally, equal width */
}

#test2 {
  border-right: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background: white;
  width: 100px;
  height: 200px;
  padding: 15px 15px 15px 15px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  flex: 1;
  /* additionally, equal width */
}

#test1, #test2 {
  position: relative;
}

img {
  margin-left: auto;
  margin-right: auto;
  display: block;
 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div id="parent">
  <div id="test1">
    <img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">
  </div>
  <div id="test2">
    <img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">
  </div>
</div>

Solution 2: Use nested flexbox

An alternative solution is to use nested flexboxes to vertically align your images. The parents (#test1 and #test2) must have their display property set to flex, and use a combination of justify-content: center and align-items: center to center the nested images:

#test1, #test2 {
    display: flex;
    align-items: center;
    justify-contents: center;
}


#parent {
  display: flex;
  /* equal height of the children */
}

#test1 {
  border-right: 1px solid black;
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background: white;
  width: 100px;
  height: 400px;
  padding: 15px 15px 15px 15px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  flex: 1;
  /* additionally, equal width */
}

#test2 {
  border-right: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background: white;
  width: 100px;
  height: 200px;
  padding: 15px 15px 15px 15px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  flex: 1;
  /* additionally, equal width */
}

#test1, #test2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
<div id="parent">
  <div id="test1">
    <img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">
  </div>
  <div id="test2">
    <img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">
  </div>
</div>

Upvotes: 0

maťo
maťo

Reputation: 1312

Also this works:

#parent>div{
  display: grid;
  align-content: center;
}
#parent>div>img{
   margin: 0 auto;
}


#parent {
  display: flex; /* equal height of the children */
}

#parent>div{
  display: grid;
  align-content: center;
}
#parent>div>img{
   margin: 0 auto;
}

#test1 {
  border-right: 1px solid black;    
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;

  background: white;
  width: 100px;
  height: 400px;
  padding:15px 15px 15px 15px;

  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;

  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;

  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  
  
  flex: 1; /* additionally, equal width */
}

#test2 {
  border-right: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;

  background: white;
  width: 100px;
  height: 200px;
  padding:15px 15px 15px 15px;

  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;

  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;

  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  
  flex: 1; /* additionally, equal width */
}

img {
	margin-left: auto;
	margin-right: auto;
    margin-top: 25px;	
	display: block;


	
    height: auto;
	position: relative;
}
.helper {

    vertical-align: middle;
}
	<div id="parent">  
		<div id="test1">
			<img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">		
		</div>
		<div id="test2">
			<img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">		
		</div>
	</div>

Upvotes: 0

Victor Allegret
Victor Allegret

Reputation: 2404

You can center the img using flexbox like this :

display: flex;
align-items: center;
justify-content: center;

Just make the #test1and #test2 wrapper display flex.

#parent {
  display: flex; /* equal height of the children */
}

#test1 {
  border-right: 1px solid black;    
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  width: 100px;
  height: 400px;
  padding:15px 15px 15px 15px;

  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;

  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;

  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  
  
  flex: 1; /* additionally, equal width */
}

#test2 {
  border-right: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  width: 100px;
  height: 200px;
  padding:15px 15px 15px 15px;

  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;

  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;

  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  
  flex: 1; /* additionally, equal width */
}

img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
	<div id="parent">  
		<div id="test1">
			<img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">		
		</div>
		<div id="test2">
			<img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">		
		</div>
	</div>

Upvotes: 1

user5718206
user5718206

Reputation:

Try this:

#test1,
#test2 {
 display: flex;
 align-items: center;
 justify-content: center;
}

and images will be in the middle no matter which height have their parents

Upvotes: 0

Related Questions