Question posted in
The full documentation can be found here.

Divi builder – how to vertically center img in this situation

how do i vertically center an img in this given situation?

http://imgur.com/a/MWOND

I’ve been trying to follow the code in the following link but perhaps because of the way divi builder and the current layout is setup its not working.

https://designpieces.com/2012/12/vertical-centering-image-in-a-div/

Tags:

4

Answers


  1. 0

    You can set the parent to position: relative then absolutely position the image with left: 50%; top: 50%; transform: translate(-50%,-50%); to put it in the center.

    body {
  margin: 0;
}
div {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: #aaa;
}
img {
  max-width: 100px; /* this isn't necessary */
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
    <div>
  <img src="https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg">
</div>

    You can also use flexbox with justify-content: center; align-items: center; to center the image in the middle 

    body {
  margin: 0;
}
div {
  width: 100vw;
  height: 100vh;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}
img {
  max-width: 100px; /* this isn't necessary */
}
    <div>
  <img src="https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg">
</div>
    Login or Signup to reply.
  2. 0

    Check out this fiddle: https://jsfiddle.net/NayanaDas/gs7nxnms/. Add this css:

    #container {
    height: 200px;
    line-height: 200px;
   display:-moz-box; 
-moz-box-pack:center; 
-moz-box-align:center; 

display:-webkit-box; 
-webkit-box-pack:center; 
-webkit-box-align:center; 

display:box; 
box-pack:center; 
box-align:center;
}

#container img {
    vertical-align: middle;
}
    Login or Signup to reply.
  3. 0

    Solution using flex property 

    #content{
display:flex;
flex-direction:row;
background:#eee;}

#block2_2
{width:100%;
height:300px;
border:1px solid #111;
}

#block2_3
{width:100%;
height:300px;
border:1px solid #000;
}
#block2
{width:50%;
height:600px;

}
#block3
{width:50%;
height:600px;
border:1px solid #000;
display:flex;
align-content:center;
align-items:center;
justify-content:center;

}
#img{
width:200px;
height:200px;
border:1px solid #000;
overflow:hidden;
}
    <div id="content">

<div id="block2">
<div id="block2_2"></div>
<div id="block2_3"></div>
</div>
<div id="block3">
<div id="img"><img src="http://lorempixel.com/400/200/"></div>

</div>
</div>
    Login or Signup to reply.
  4. 0 
    body {
  margin: 0;
}
div {
 align-items: center;
    background: #ccc;
    display: block;
    float: left;
    height: 300px;
    justify-content: center;
    position: relative;
    width: 100%;
}
img {
  max-width: 100px; /* this isn't necessary */
   position:absolute;
   top:0;
   bottom:0;
   left:0;
   right:0;
   margin:auto;
}
    <div>
  <img src="https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search