Как вертикально отцентрировать изображение помимо h1?

Question

Как вертикально отцентрировать изображение помимо h1?

0

как я могу вертикально центрировать изображение, кроме h1, даже если h1 обертывается на странице с размером css? См. Здесь jsfiddle → http://jsfiddle.net/JJvG6/

HTML:

<div>
  <div id="img"><img></img></div>
  <div id="h1"><h1>This Div and the div with the picture should always be vertically centered, when page resizes and h1 wraps.</h1></div>
</div>

CSS:

div {
    margin: 5px;
    border: 1px solid black;
}

div #img {
    float: left
}

благодаря

RockScientist 20 сен. 2013, в 23:53

Источник

Теги:

html

css

2 ответа

0

Не уверен, что вы долгосрочные цели css/html здесь, но, возможно, таблица (/frets) принесет вам больше пользы в этой ситуации.

<table>
    <tr>
        <td><img src="http://31.media.tumblr.com/avatar_207d7520c3c8_128.png" /></td>
        <td><h1>This Div and the div with the picture should always be vertically centered, when page resizes and h1 wraps. And this text could go on for who knows how long.. blah blah blah. random text And this text could go on for who knows how long.. blah blah blah. random text</h1></td>
    </tr>
</table>

jsfiddle

Nick Rolando 20 сен. 2013, в 19:16

0

Спасибо за вашу идею. Я думал о таблицах, но наах :) Это действительно не содержание таблицы, поэтому я неохотно его использую.
RockScientist 20 сен. 2013, в 22:08
0

-1 за ужасное использование таблиц. Вместо этого используйте display: table и display: table-cell чтобы другие элементы действовали как элементы таблицы.
Nightfirecat 20 сен. 2013, в 22:13
0

@Shredder Твой код , мой код . Это довольно просто.
Nightfirecat 20 сен. 2013, в 22:30
0

@Nightfirecat Хорошо. Я пытался сделать это, но я делал это неправильно. Сделай это ответом.
Nick Rolando 20 сен. 2013, в 22:34

Показать ещё 2 комментария

Ещё вопросы

Спасибо за вашу идею. Я думал о таблицах, но наах :) Это действительно не содержание таблицы, поэтому я неохотно его использую.
-1 за ужасное использование таблиц. Вместо этого используйте display: table и display: table-cell чтобы другие элементы действовали как элементы таблицы.
@Shredder Твой код , мой код . Это довольно просто.
@Nightfirecat Хорошо. Я пытался сделать это, но я делал это неправильно. Сделай это ответом.

Nightfirecat · Accepted Answer · 2013-09-20T20-13-00.000Z

Основываясь на некотором коде Shredder, который использовался, чтобы показать, как использование таблицы может решить проблему, вы можете вместо этого использовать элементы, отличные от таблицы, и применять display: table и display: table-cell (и другие display значения по мере необходимости), чтобы создать ту же самую вещь, используя семантически-нейтральные элементы.

(обратите внимание, что два примера отличаются друг от друга по-разному из-за значений по умолчанию для браузера для CSS таблицы - при использовании <div> не будет лишнего места)

HTML

<div>
    <div><img src="http://31.media.tumblr.com/avatar_207d7520c3c8_128.png" /></div>
    <div><h1>This Div and the div with the picture should always be vertically centered, when page resizes and h1 wraps. And this text could go on for who knows how long.. blah blah blah. random text And this text could go on for who knows how long.. blah blah blah. random text</h1></div>
</div>

CSS

div {
    display: table;
}

div > div {
    display: table-cell;
    vertical-align: middle;
}