CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Tomasz
Tomasz

Reputation: 210

Align content vertical and horizontal to content

I need to align image to div (.md4 - boostrap) horizontal and vertical...

I try do this like:

             <div class="front" style="height: 820px; width: 820px; vertical-align: middle;" >

                    <div class="inner" style="float:none; margin:0 auto;">

                        <img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg"/>

                    </div>

             </div>

But it doesn't work. Its still align only in one way.

jsfiddle https://jsfiddle.net/tzvze7ew/

What i do wrong ? And how should its look for work?

Upvotes: 0

Views: 33

Answers (2)

Suresh Dhanakotti
Suresh Dhanakotti

Reputation: 61

The above solution won't support all the browsers. Because transform is CSS3 property.

We can achieve through javascript. What we can do is lets calculate the height of the browser and divide by 2 and minus 50% height of the image.

Below is code

.img {
  margin: 0 auto;
 }

Javascript Lets say your image height is 150px. 

<script>
  $(document).ready(function(){
   var height = window.innerHeight;
   var new_height = (height/2) - 75; // Half of 150 of 75.
   $('.img').css('margin-top', new_height+'px');
  });
</script>

Upvotes: 1

Ricky Ruiz
Ricky Ruiz

Reputation: 26791

You can use the CSS property transform to center both vertically and horizontally.

body {
  margin: 0;
}
div:first-of-type {
  background-color: blue;
  height: 100vh;
}
img {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="col-md-4">
  <div class="main">
    <div class="submain">
      <div class="front">
        <div class="inner">
          <img src="http://placehold.it/100x100" />
        </div>
      </div>
      <div class="back">
      </div>
    </div>
  </div>
</div>

Upvotes: 3

Related Questions