HTML: Как выровнять текст по центру изображения по левому краю?

Question

Мне нужно сделать что-то вроде следующего на моей веб-странице:

-------------------------------------------------------------------
|Normal text                                                      |
|                                                                 |
|      Some text aligned to image left                            |
|      ----------------------------------------------------       |
|      |                  Centered image                  |       |
|      |                                                  |       |
|      ----------------------------------------------------       |
|                                                                 |
-------------------------------------------------------------------

Я абсолютно не знаю, как это сделать.Пока что все, что я пробовал, привело к тому, что текст, который должен быть выровнен по левому краю изображения, также был отцентрирован: (

Спасибо

Answer 1

Поместите текст и изображение в один элемент div. Отцентрируйте div и выровняйте текст внутри него по левому краю.

Answer 2

Попробуйте: допустим, размер ваших изображений: 800x600 HTML-разметка

<div id="content">
<img src="something...">
</div>

CSS

#content img
{

    position:relative;
    top:50%;
    left:50%;
    margin-top:-300px;
    margin-left:-400px;
}

ИЛИ

Вы можетеиспользовать изображение в качестве фона и

#content
{
    background-image:url('bg.png');
    background-position:center;
    background-repeat:no-repeat;
}

Подробнее о background-position http://www.w3schools.com/cssref/pr_background-position.asp

Answer 3

Попробуйте это:

<table style="width:100%;">
    <tr>
        <td style="width:100%;">>
            <div style="text-align:left;">Normal Text</div>
        </td>
    </tr>
    <tr>
        <td style="width:100%;">
            <table style="width:80%;" align="center">
                <tr>
                    <td style="width:100%;">
                        <div style="text-align:left;">Some text aligned to image left</div>
                    </td>
                </tr>
                <tr>
                    <td style="width:100%;">
                        <image url=""></image>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Answer 4

1. Обычный текст ---> Дать обычным способом, т.е. без отступов

2. Часть текста выровнена по левому изображению ---> Задать отступ слева

3. Центрированное изображение -----> дать выровненный центр