CODEWITHSUNDEEP
htmlcsstwitter-bootstrapalignment
bijoume
bijoume

Reputation: 365

Vertically aligned image

I have this big logo on the home page which should be aligned to center. I managed to center it horizontally, but not vertically. The only solution I could think of was setting the top-margin to 20% but it seems that this is not a good solution for a responsive design. What could be the proper solution to this?

Here is the HTML:

<section id="home">
<div class="container">
<img id="logo2" class="img-responsive" src="img/logo2.png" > 
</div> <!--end container-->
</section> <!--end home-->

And here's the CSS:

#logo2 {
    margin: 0 auto;
    margin-top: 20%;
}

And here is the link to the home page itself: http://skiest.ragne.me/.

Thank you for your help.

Upvotes: 0

Views: 36

Answers (3)

5tormTrooper
5tormTrooper

Reputation: 923

If you have a declared height for the element, you can use absolute positioning on it by wrapping it in a parent container:

.parent {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  text-align: center;
  height: 100px; /* Or whatever height it is */
}

.child {
  display: inline-block;
}

Upvotes: 1

JBaoz
JBaoz

Reputation: 298

You can do this via CSS:

.container {
    line-height: 200px;
}

.container img {
    vertical-align: middle;
}

Upvotes: 0

Rafał Konarski
Rafał Konarski

Reputation: 87

I think you should add to #home style "display:table;" and to "container" class "display:table-cell;vertical-align:middle;". For more flexible add "width:100%;height:100%" to #home

Upvotes: 0

Related Questions