CODEWITHSUNDEEP
htmlcss
user379888
user379888

Reputation:

Make image center aligned

I want to make the images on this page centre aligned. I have tried below solution but it does not work in my case. Please guide. PASSWORD: inspurate123

Solution:

display: block;
margin-left: auto;
margin-right: auto;

My code:

<div class="title_area" style="float:left;">
    <h1 class="post_title">
        <a href="<?php the_permalink();?>" title="<?php the_title_attribute(); ?>">
            <?php the_title(); ?>
        </a>
    </h1>
    <br>

    <?php the_content(); ?>                     
</div>   
</article>
<?php get_template_part('share_this');?>
</div>

Upvotes: 0

Views: 70

Answers (5)

user4103823
user4103823

Reputation:

Try this and let me know if it worked

img{
display:block !important;
clear:both;
margin:0 auto;
}

Upvotes: 0

Mukul Kant
Mukul Kant

Reputation: 7122

enter image description here

Try it:-

.wp-caption.alignnone{
     margin:0 auto
 }
.title_area img {
    display: block;
    margin: 0 auto;
    width: 90%;
}

Hope it works for you.

enter image description here

Upvotes: 1

Manjunath Siddappa
Manjunath Siddappa

Reputation: 2157

First of all remove float

you can do it like below

Fiddle

http://jsfiddle.net/q2bm79t2/

img{
    margin:0 auto;

    }

.imageReplace{
    text-align:center

}

Html

<div class="imageReplace">
    <img src="http://drublic.de/blog/wp-content/uploads/2011/10/rotate-images.jpg">
</div>

Upvotes: 0

Gho
Gho

Reputation: 568

You can use display:inline-flex (CSS3)

add this to the body{display:inline-flex; width:100%;}

now remove the padding from your login.

It's css3, some browsers won't support it.

Upvotes: 0

Suresh Pattu
Suresh Pattu

Reputation: 6219

Try this

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Upvotes: 0

Related Questions