Как получить таблицы, как строки в контейнере, используя CSS

Question

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

Для страниц галереи, например http://artistsatlaketahoe.com/abstract.html, много встроенных стилей используется для форсирования текущего макета. Я предпочел бы полностью заменить это CSS, который представляет следующий табличный макет внутри div "content":

[изображение] [описание изображения и кнопка покупки]
[изображение] [описание изображения и кнопка покупки]
[изображение] [описание изображения и кнопка покупки]

Я бы хотел выровнять описание по центру изображения и кнопку покупки относительно изображения, если это возможно. А затем примените некоторые отступы выше и ниже каждой строки, чтобы прекратить использовать теги
для вертикального интервала.

Любые идеи, как создать div, который я могу использовать, чтобы получить этот вид макета?

Спасибо!

Answer 1

<div id="container">
    <div id="row" style="display:table-row; margin:5px 0; outline:red solid 1px;">
        <div id="image" style="float:left; outline:blue solid 1px;"><img src="#" /></div>
        <div id="content" style="display:table-cell; padding:5px; outline:green solid 1px; vertical-align:middle;">
            Image Description<br />
            <input type="button" value="Button" />
        </div>
    </div>
</div>

Answer 2

Используя встроенный стиль для простоты, перейдите к CSS для достижения своей цели.

<div>
    <img src="#" style="float: left; padding: 10px 10px 10px 0;" />
    <div>
        <p>Text</p>
        <input type="submit" value="Submit" />
    </div>
</div>