使图像中心对齐

Question

我想让this页面中心的图片对齐。我尝试过以下解决方案，但在我的情况下不起作用。请指导。 密码：inspurate123

解决方案：

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

我的代码：

<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>

Answer 1

试一试： -

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

希望它适合你。

Answer 2

首先删除float

你可以像下面这样做

<强>小提琴

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>

Answer 3

试试这个

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

Answer 4

您可以使用display：inline-flex（CSS3）

将其添加到body{display:inline-flex; width:100%;}

现在从您的登录名中删除填充。

这是css3，有些浏览器不支持它。

Answer 5

试试这个并让我知道它是否有效

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