Центрирование фонового изображения слева от двух столбцов - PullRequest
Новая
       25

Центрирование фонового изображения слева от двух столбцов

2 голосов
/ 24 августа 2011

У меня есть большое изображение и некоторый текст, который я хотел бы выложить в два столбца, шириной 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!

Ответы [ 2 ]

2 голосов
/ 24 августа 2011

Конечно, вы могли бы сделать это с помощью 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; }
1 голос
/ 24 августа 2011

Я знаю стандартный прием получения двух столбцов одинакового размера, но мне нравится использовать другой метод, включающий 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());
...