對齊一個在中心的形象，一個在右

我想實現這樣的事情：對齊一個在中心的形象，一個在右

      [CENTER IMAGE]    [RIGHT IMAGE]

這裏是什麼，我的意思是一個形象的例子：http://prntscr.com/a9vuxv

我已經應用了下面的代碼，但是卻讓右側圖像和我的目標是把在中心一個形象，一個在右邊：

<div style="width: 100%;"> 
    <div style="float: right;"> 
    <img src="centerimage.png" /> 
    </div> 
    <div style="float: right;"> 
    <img src="rightimage.png" /> 
    </div> 
</div>

來源

2016-03-01 The Codesee

我會去使用柔性盒。 – BenDavidJamin

Flexbox也無法做到這一點。 –

那麼，你想要中心圖像相對於整個頁面寬度居中還是相對於沒有被正確圖像佔據的空間？您的文本版本似乎暗示了第一個，但您的鏈接圖像指向後者。 – Marcelo

-2

.center{ 
 
    display: block; 
 
    margin: auto; 
 
    }

<div style="width: 100%;"> 
 
<div style="float: right;"> 
 
<img src="centerimage.png" width="100" height="100"/> 
 
</div> 
 
<img class="center" src="rightimage.png" width="100" height="100" /> 
 
</div>

刪除浮動：在市中心的圖像，並添加如下因素的規則：

margin: auto; 
display: block;

來源

2016-03-01 16:34:00 silviagreen

中心圖像實際上並不居中......它受右分區的影響。 –

輝煌，您的解決方案奏效，謝謝！ –

它可能是一個更好的計劃，以完全絕對定位將el從流量中排除，但如果imgs的大小合適，則左邊的浮動將相當好地工作。這個答案不應該被降低。 – Bosworth99

可以使用的伎倆與display: inline-block和text-align: center。

<div style="width: 100%; text-align: center; position: relative;"> 
 
    <div style="display: inline-block;"> 
 
    <img src="http://bit.ly/1UwB3sP" /> 
 
    </div> 
 
    <div style="position: absolute; right: 0; top: 0"> 
 
    <img src="http://bit.ly/1UwB3sP" /> 
 
    </div> 
 
</div>

來源

2016-03-01 16:36:40 martin

在流動會影響中心圖像/ div的邊緣或對準的任何元件。因此，我們需要從文檔流中移除元素並使用絕對定位。

然後，中心元素可以按照任何常用方法居中...在這裏，我刪除所有浮動，使用inline-block/text align:center居中中間的圖像/ div和絕對位置正確的圖像/ div。

.parent { 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.center { 
 
    display: inline-block; 
 
    background: red; 
 
} 
 
.right { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    background: pink; 
 
}

<div class="parent"> 
 
    <div class="center"> 
 
    Some Image Centered 
 
    </div> 
 
    <div class="right"> 
 
    some image right 
 
    </div> 
 
</div>

注：你可以，當然，浮法/對齊右DIV /圖像和中心DIV /圖像絕對定位....它的一個選擇。

來源

2016-03-01 16:38:45

將容器格設置爲text-align: center;，並將正確的元素設置爲絕對正確。

.container{ 
 
    text-align: center; 
 
} 
 

 
.right{ 
 
    position: absolute; 
 
    right: 0; 
 
}

<div class="container"> 
 
    <img class="center" src="http://i.stack.imgur.com/e4z3K.jpg"> 
 
    <img class="right" src="http://i.stack.imgur.com/T5KPW.jpg"> 
 
</div>

來源

2016-03-01 17:01:21

這裏是溶液。

.right{ 
 
    float: right; 
 
} 
 
.center{ 
 
    overflow: hidden; 
 
} 
 
.center img{ 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<div style="width: 100%;"> 
 
    <div class="right"> 
 
<img src="http://lorempixel.com/150/150/nature/" /> 
 
    </div> 
 
    
 
    <div class="center"> 
 
<img src="http://lorempixel.com/150/150/nature/" /> 
 
    </div> 
 
</div>

來源

2016-03-01 17:59:15

對齊一個在中心的形象，一個在右

回答

相關問題