讓圖像中心對齊

我想讓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>

來源

2014-10-17 Fahad Uddin

爲什麼要用'風格=「浮動：左;' – 2014-10-17 11:30:07

你是什麼意思圖片 – 2014-10-17 11:31:33

@torazaburo：顯示大圖？ – 2014-10-17 11:34:58

enter image description here

嘗試： -

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

希望它爲你工作。

enter image description here

來源

2014-10-17 11:43:58

我可以從圖像中清楚地看到它不在中間對齊。 – 2014-10-17 11:51:41

'.wp-caption.alignnone {margin：0 auto}'add it – 2014-10-17 11:52:33

@不適合我。 – 2014-10-17 11:54:28

首先刪除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>

來源

2014-10-17 11:29:48

'text-align'對圖像標籤沒有任何作用。 – 2014-10-17 11:34:32

@ torazaburo我想提到像上面，謝謝你指出它。 – 2014-10-17 11:40:11

試試這個

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

來源

2014-10-17 11:32:54

您可以使用顯示：內聯-FLEX（CSS3）

將此添加到body{display:inline-flex; width:100%;}

現在從登錄中刪除填充。

這是css3，有些瀏覽器不支持它。

來源

2014-10-17 11:35:42 Gho

包括IE11以下的任何東西。 – 2014-10-17 11:38:23

試試這個，讓我知道它的工作

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

來源

2014-10-17 11:47:23

讓圖像中心對齊

回答

相關問題