place image vertical in middle

Question

Hi how do i place this image vertical in the middle of the div? The height of the header is different when you are login or logout!

<div class="header">
  <nav class="header-content columns" data-topbar role="navigation"> 
    <div class="logo-area">
      <?php echo logo_header(); ?>
    </div>
    <section class="header-content-section">

    </section>
  </nav>
</div>

How to set up the css that the image will stay vertical centered? .header-content .logo-area {

} .header-content .logo-area img {

}

Thanks

Theres a great answer to that question here: https://stackoverflow.com/questions/388180/how-to-make-an-image-center-vertically-horizontally-inside-a-bigger-div — perfection, Sep 08 '17 at 11:33

score 0 · Answer 1 · answered Sep 08 '17 at 11:42

0

You can achieve this by putting an auto margin on the left and right, but you need to display your image as block, so it occupies all the space in the container.

.header-content .logo-area img { 
  display: block; 
  margin: 0 auto;
}

answered Sep 08 '17 at 11:42

Maurice van Cooten

42
2
10

This do anything – Rhoda Sep 08 '17 at 11:51
It depends on the size of your divs surrounding the image. – Maurice van Cooten Sep 08 '17 at 11:55

score 0 · Answer 2 · answered Sep 08 '17 at 11:48

0

You can do it with flexbox

.header-content .logo-area {
  display: flex;
  justify-content: center;
}
.header-content .logo-area img {
  width:250px;
  height:250px;
}

Example : https://jsfiddle.net/q59wv9ew/2/

answered Sep 08 '17 at 11:48

Ovidiu Unguru

756
5
14

for horizontal yes not for vertical – Rhoda Sep 08 '17 at 12:05
See this topic sir https://forums.osclass.org/themes-26/how-to-center-a-image-vertical-in-css/ – Rhoda Sep 08 '17 at 13:44

place image vertical in middle

2 Answers2