Advertisement:

Author Topic: How to center a image vertical in css  (Read 1061 times)

Rhoda

  • Jr. Member
  • **
  • Posts: 92
How to center a image vertical in css
« on: September 08, 2017, 05:42:08 pm »
Hi guys how do i center this image vertical inside the header?
The height of the header is different when you are login or logout!

Code: [Select]
<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

_carlison

  • Full Member
  • ***
  • Posts: 134
Re: How to center a image vertical in css
« Reply #1 on: September 08, 2017, 06:53:52 pm »
try this code :

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

Liath

  • issues
  • Hero Member
  • *
  • Posts: 1346
  • </html> the end is always near
Re: How to center a image vertical in css
« Reply #2 on: September 09, 2017, 12:07:18 am »
try this code :

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


nonsens, this is to center it horizontally... you could take a look on this example

frosticek

  • Hero Member
  • *****
  • Posts: 3948
Re: How to center a image vertical in css
« Reply #3 on: September 09, 2017, 08:43:01 pm »
Use position absolute on image and set top, left, right and bottom to auto, margin as well.

Liath

  • issues
  • Hero Member
  • *
  • Posts: 1346
  • </html> the end is always near
Re: How to center a image vertical in css
« Reply #4 on: September 09, 2017, 10:33:01 pm »
Use position absolute on image and set top, left, right and bottom to auto, margin as well.
then you need to set position relative to the parent also

marius-ciclistu

  • issues
  • Hero Member
  • *
  • Posts: 1652
  • "BE GRATEFUL TO THOSE THAT SUPPORTED YOU"
Re: How to center a image vertical in css
« Reply #5 on: September 09, 2017, 11:29:53 pm »
The easiest way would be to use margin top or bottom and to manually enter a value so it's centered in the header. (imho).

Liath

  • issues
  • Hero Member
  • *
  • Posts: 1346
  • </html> the end is always near
Re: How to center a image vertical in css
« Reply #6 on: September 10, 2017, 12:06:07 am »
whats the problem with my suggested solution? it's so easy
https://jsfiddle.net/qxr5a0a2/

marius-ciclistu

  • issues
  • Hero Member
  • *
  • Posts: 1652
  • "BE GRATEFUL TO THOSE THAT SUPPORTED YOU"
Re: How to center a image vertical in css
« Reply #7 on: September 10, 2017, 12:11:25 am »
I just saw it. Seems ok.(I did not look at it before, I was just expresing my oppinion).