Центрирование двух div в div: один с фиксированной шириной, а другой с переменной шириной / высотой - PullRequest
Новая
       11

Центрирование двух div в div: один с фиксированной шириной, а другой с переменной шириной / высотой

1 голос
/ 10 января 2012

У меня есть ситуация, когда у меня есть один div фиксированной ширины, содержащий изображение, извлеченное из Twitter, и другой div переменной ширины, содержащий пользовательский текст переменной длины. Я хочу добиться чего-то вроде следующего:

enter image description here

Я могу сделать это достаточно хорошо с одним div, который имеет background-image и padding-left. Но я хочу иметь возможность применить border-radius к элементу img, что просто невозможно с background-image.

Если я сделаю text-align: center на внешнем div, это приведет меня на полпути. Вот ДЕМО и скриншот:

enter image description here

Но это, очевидно, не совсем то, что я хочу.

Как мне это сделать?

Ответы [ 4 ]

1 голос
/ 10 января 2012

Спросите, и вы получите & mdash; упрощенный пример jsFiddle :

jsFiddle Screenshot

В качестве дополнительного бонуса текст также центрирован по вертикали!

HTML: 

<div class="logo">
    <div class="logo-container">
        <img src="http://img.tweetimag.es/i/appsumo_b.png" />
    </div>

    <div class="logo-name">
        AppSumo is a really really long title that continues down the page
    </div>
</div>

CSS: 

.logo {
    background-color: #eee;
    display: table-cell;
    height: 100px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 600px;
}

.logo-container {
    background-color: #fff;
    border-radius: 10px;
    left: 10px;
    position: absolute;
    top: 10px;
    width: 75px;
}

.logo-name {
    font: bold 28px/115% Helvetica, Arial, sans-serif;
    padding-left: 85px;
}
1 голос
/ 10 января 2012

Было бы что-то вроде этого? http://jsfiddle.net/uPPTM/6/

.logo {
    width:80%;
    margin:auto;
    background-color: red;
}
.logo-container {
    border: 1px solid gold;
    width:73px;
    height: 73px;
    display: inline-block;
    vertical-align:middle; 
}
.logo-name {
    display: inline-block;
}
0 голосов
/ 10 января 2012

Используйте абсолютное позиционирование с левой позицией, чтобы протолкнуть текст заголовка за изображение.

http://jsfiddle.net/uPPTM/9/

.logo { width: 50px; }
.title { 
    position: absolute; 
    top: 0;
    left: 50px;
    font-size: 32px; 
    text-align: center; 
}
img {
    border: 1px solid gray;
    border-radius: 15px;
}


<div class="logo">
    <div class="logo-container">
        <img src="http://img.tweetimag.es/i/appsumo_b.png">
    </div>
    <div class="logo-name">AppSumo</div>
</div>
0 голосов
/ 10 января 2012

Вы можете перемещать контейнер изображений (или само изображение без контейнера) влево, очищая все, что осталось, ... а затем перемещать текст влево, очищая все, что вправо. 

.logo-container{
    float:left;
    clear:left;
}
.logo-name{
    float:left;
    clear:right;
}

Вы можете отрегулировать расстояние текста, используя поля. 

.logo-name{
    float:left;
    clear:right;
    margin-top:10px;
    margin-left:5px;
}
...