在兩列左側居中放置一個背景圖片

我有一個很大的圖片，我想在兩欄中列出一些文字，寬度都是50％，右欄中的文字和圖片中的左邊的列。我希望左欄從右邊的文本中取得高度，圖像的中心在左欄的中心，垂直和水平。在兩列左側居中放置一個背景圖片

因此，像這樣：

[    ]|[----Text-----] 
[    ]|[-------------] 
[    ]|[-------------] 
[ Image ]|[-------------] 
[ Centre ]|[-------------] 
[    ]|[-------------] 
[    ]|[-------------] 
[    ]|[-------------]

標準的手段來得到左手柱的高度來匹配右欄的是把一個div容器兩列周圍，以便左欄能在那裏是全高的，並且允許右邊的列坐在左邊的頂部。所以像這樣的東西。

<div class="container"> 
    <div class="right-column">Lorem ipsum dolor sit...</div> 
</div> 

div.container { 
    background-image: url(my_big_image.jpeg); 
    background-position: ?; 
    float: left; 
    width: 100%; 
} 

div.right-column { 
    float: right; 
    background: white; 
    width: 50%; 
}

但是，如何讓我的圖像的中心到左邊的列的中心？看起來我需要容器div來包含右欄以獲得正確的高度，但我需要排除它以便在左欄中水平居中放置圖像。

理想情況下，我想這樣做，而不使用JavaScript！

來源

2011-08-23 Duncan Parkes

你當然可以這樣做與jQuery，但這裏是一個CSS唯一的方法：

DEMO： http://jsfiddle.net/skylar/zXqQB/

HTML：

。

<div id="container"> 
    <div id="text"> 
     <div id="image"></div> 
     Lorem ipsum dolor sit amet.. 
    </div> 
    <div class="clear"></div> 
</div>

CSS：

#container { position:absolute; } 
#image { 
    position:absolute; 
    left:0; 
    width:50%; 
    height:100%; 
    background-color: #ccc; 
    background-image: url(http://www.maniacworld.com/have-a-nice-day.jpg); 
    background-position: center center; 
    background-repeat: no-repeat; 
} 
#text { margin-left:50%;} 
.clear { clear:both; }

來源

2011-08-23 20:45:56

我知道獲取兩列的標準技巧是相同的大小，但我喜歡使用不同的方法涉及JavaScript（或在我的情況下，jQuery）。 jQuery不應該僅僅用於這個，但是如果你的網站有它，不妨使用它。它還涉及第三個分區。

LIVE DEMO http://jsfiddle.net/ZH4mT/5/

（添加/從blah區域刪除文本看BG圖像中心的水平和垂直）

HTML

<div class="container"> 
    <div class="left-column"></div> 
    <div class="right-column">blah blah blah blah blah ... blah blah blah</div> 
</div>

CSS（背景顏色用於演示目的）

.container { 
    float: left; 
    width: 100%; 
} 

.left-column { 
    float: left; 
    background: #ff0 url(http://dummyimage.com/100x100/000/fff) no-repeat; 
    background-position: 50% 50%;  
    width: 50%; 
} 

.right-column { 

    float: right; 
    background:#f00; 
    width: 50%; 
}

jQuery的

var l = $('.left-column'); 
var r = $('.right-column'); 
if (l.height() < r.height()) 
    l.height(r.height()); 
else 
    r.height(l.height());

來源

2011-08-23 20:41:15 Dutchie432

你應該換用'$（窗口）.resize您的JavaScript（函數（）{..}）調整（）;'來處理被調整窗口的大小。 – thirtydot

謝謝！理想情況下，我想在不使用JavaScript的情況下執行此操作 - 已經編輯過提及此！ –

在兩列左側居中放置一個背景圖片

回答

相關問題