中心圖像

我想水平居中一個圖像。但是它不會從頁面的左側移動。 This answer在我的情況下不起作用。我究竟做錯了什麼？中心圖像

#container {     
     width: 100%;   
     border: 2px yellow dashed; 
     height: 100px; 
} 

#profile-image img{ 
    margin-left: auto; 
    margin-right: auto; 
    border: 2px orange solid; 
}

我的空間：

<div id="container"> 
      <div id="profile-image"> 
       <p><img src="<?php echo $data['profile_image_url'];?>" alt="me"></p> 
      </div>

來源

2013-08-02 Anthony

作出任何股利或任何水平的中心，普通CSS的方法將是，讓有寬度，並宣佈margin:0 auto;

#profile-image{ 
    width:400px; 
    margin:0 auto; 
}

來源

2013-08-02 18:55:58

+1謝謝。有效。 – Anthony

雖然這種方法的問題是你必須明確地分配一個寬度的容器.. – reikyoushin

試試這個：http://jsfiddle.net/rua4d/2/

#container {     
    width: 300px;   
    border: 2px yellow dashed; 
    height: 100px; 
    display:table-cell; 
    position:relative; 
    vertical-align:middle; 
} 


#profile-image img{ 
    margin-left: auto; 
    margin-right: auto; 
    border: 2px orange solid; 
    display:block; 
    position:relative; 
    vertical-align:middle; 
    text-align:center; 
    width:50px; 
}

來源

2013-08-02 18:52:59 Keith

爲什麼'垂直對齊：中間; '在塊元素上？ – VoidKing

+1謝謝你，非常有幫助的答案。 – Anthony

您只需要將

display:block

添加到您的圖片樣式中即可。圖像是內聯元素，內聯元素忽略邊距。

來源

2013-08-02 19:08:16 deadnancy

爲什麼不能工作？

#profile-image p { text-align: center; } 
#profile-image img { display: inline; }

這樣你就不需要，如果你想利潤率與text-align: center共同努力，指定寬度..你需要inline-block代替：

#profile-image p { text-align: center; } 
#profile-image img { display: inline-block; }

來源

2013-08-02 19:09:15 reikyoushin

+1是的！這很棒！雖然@ RitabrataGautam的例子爲我的圖像工作（這個圖像的大小將永遠不會改變 - 它的48x48像素），我的圖片下方的文字將改變的長度和您的解決方案完美的工作！非常感謝你！ – Anthony

沒問題。元素是內聯的默認..所以你可以'文本對齊：中心'他們..我斷定你需要的寬度等，並使他們工作，你做他們'塊'，但這將取消文本-align屬性..所以你真正需要的圖像是'display：inline-block'，它有兩個。 – reikyoushin

和我只使用'margin：0 auto;'當我確定容器會有一個用戶定義的..例如最外層的包裝元素。 – reikyoushin

回答

相關問題