是否有可能使圖像居中？

-2

是否有可能使圖像居中？因此它將顯示爲與background-position：center center一起顯示的那個。是否有可能使圖像居中？

HTML：

<div class="image-container"> 
    <img src="{img_src}" /> //Lets assume original dimension of image is 1200X700 
</div>

CSS：

.image-container {width:500px; height:400px} 
.image-container img { max-width:100%; }

我想圖像以填充整個容器寬度並卸下左側和圖像的右部分，從而爲中心它將被顯示。

來源

2016-11-29 Pratik Deshmukh

yes yes，但是你想要什麼？ –

這個問題完全含糊，不可能回答。 _什麼形象？在_什麼情況下？使用_which_標記？和_which_風格的規則？ – arkascha

請更具體地說明你想達到的目標。分享相關的代碼，並舉例說明你的問題 –

可以分配給text-align: center IMG的父母

或

使用margin: 0 auto到的img

.one{ 
 
    text-align: center; 
 
    display: block; 
 
} 
 
.two img{ 
 
    margin: 0 auto; 
 
    float: none; 
 
    display: block; 
 
}

<div class="one"> 
 
    <img src="http://placehold.it/100x50" /> 
 
</div> 
 

 
<div class="two"> 
 
    <img src="http://placehold.it/100x50" /> 
 
</div>

來源

2016-11-29 10:15:30 Rahul

你沒有設置對img任何樣式。

而是風格是使用display:flex容器和垂直方向和水平方向對準裏面的物品，所以你會實現你想要的

在下面的例子中

我已經把相同的圖像在2升不同的容器（第一是病急亂投醫第二不）向你展示差異

請記住。在本例中爲。圖像沒有被縮小或調整大小，而是具有相同的寬度和高度（1200x700），但不適合容器內部的部分是cut。

讓我知道，如果這有助於

.image-container { 
 
    width:500px; 
 
    height:400px; 
 
display:flex; 
 
align-items:center; 
 
justify-content:center; 
 
overflow:hidden 
 
}

<div class="image-container"> 
 
    <img src="http://placehold.it/1200x700"> 
 
</div> 
 
    
 
<div class="nostyle"> 
 
    <img src="http://placehold.it/1200x700"> 
 
</div>

來源

2016-11-29 10:38:17

圖像配容器IMG {最大寬度：60％;保證金：汽車;}或

圖像配容器img {max-width：300px; margin：auto;}

來源

2016-11-29 10:40:18

是否有可能使圖像居中？

回答

相關問題