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

У меня есть этот HTML:

<table>
<tbody>
    <tr>
        <td style="padding-bottom:12px;">
            <a title="Blogartikel Nummer 2" href="#">
            <img width="80" height="80" class="recent-thumbnail" title="Blogartikel Nummer 2" src="http://upload.wikimedia.org/wikipedia/commons/b/bf/Lano_Beach_-_Savai%27i,_2007.jpg">Blogartikel Nummer 2</a>
            <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</div> 
        </td>
    </tr>
    <tr>
        <td style="padding-bottom:12px;">
            <a title="Blogartikel Nummer 1" href="#">
            <img width="80" height="80" class="recent-thumbnail" title="Blogartikel Nummer 1" src="http://upload.wikimedia.org/wikipedia/commons/b/bf/Lano_Beach_-_Savai%27i,_2007.jpg">Blogartikel Nummer 1</a>
            <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</div> 
        </td>
    </tr>
</tbody>
</table>

Слева есть изображение, а справа - ссылка с текстом ниже. Я хочу выровнять текст справа по центру изображения. Я попытался style="vertical-align:middle;", но это не выровняет полный текст, только часть.

Как я могу это сделать?

скрипка: http://jsfiddle.net/wNFTs/

Спасибо!:)

Источник

3 ответа

Решение

Использование text-align

 text-align:center

Делать CSS класс и делать:

.center-text {
    text-align:center;
}

<span class="center-text"> Blogartikel Nummer 2</span>
<div class="center-text"> Lorem Ipsum </div>

Поскольку span не являются блочными элементами, возможно, вам придется применить: display: inline-block атрибут для пролета.

http://jsfiddle.net/K6pSK/6/

Источник

Вы можете обернуть их в контейнеры и установить контейнеры display: inline-block а также vertical-align: middle,

HTML

<table>
    <tbody>
        <tr>
            <td style="padding-bottom:12px;">
                <div class="image">
                    <a title="Blogartikel Nummer 2" href="#">
                        <img width="80" height="80" class="recent-thumbnail" title="Blogartikel Nummer 2" src="http://upload.wikimedia.org/wikipedia/commons/b/bf/Lano_Beach_-_Savai%27i,_2007.jpg" />
                    </a>
                </div>
                <div class="info">
                    <a title="Blogartikel Nummer 2" href="#">Blogartikel Nummer 2</a>
                    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</div>
                </div>
            </td>
        </tr>
        <tr>
            <td style="padding-bottom:12px;">
                <div class="image">
                    <a title="Blogartikel Nummer 1" href="#">
                        <img width="80" height="80" class="recent-thumbnail" title="Blogartikel Nummer 1" src="http://upload.wikimedia.org/wikipedia/commons/b/bf/Lano_Beach_-_Savai%27i,_2007.jpg" />
                    </a>
                </div>
                <div class="info">
                    <a title="Blogartikel Nummer 1" href="#">Blogartikel Nummer 1</a>
                    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
                    eirmod tempor invidunt.</div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS

.image, .info {
    display: inline-block;
    vertical-align: middle;
}

jsfiddle

Предложение:

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

HTML

<div class="item">
    <div class="image">
        <a title="Blogartikel Nummer 2" href="#">
            <img width="80" height="80" class="recent-thumbnail" title="Blogartikel Nummer 2" src="http://upload.wikimedia.org/wikipedia/commons/b/bf/Lano_Beach_-_Savai%27i,_2007.jpg" />
        </a>
    </div>
    <div class="info">
        <a title="Blogartikel Nummer 2" href="#">Blogartikel Nummer 2</a>
        <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</div>
    </div>
</div>
<div class="item">
    <div class="image">
        <a title="Blogartikel Nummer 1" href="#">
            <img width="80" height="80" class="recent-thumbnail" title="Blogartikel Nummer 1" src="http://upload.wikimedia.org/wikipedia/commons/b/bf/Lano_Beach_-_Savai%27i,_2007.jpg" />
        </a>
    </div>
    <div class="info">
        <a title="Blogartikel Nummer 1" href="#">Blogartikel Nummer 1</a>
        <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
            eirmod tempor invidunt.</div>
    </div>
</div>

CSS

.item {
    margin-bottom: 12px;
}

.image, .info {
    display: inline-block;
    vertical-align: middle;
}

jsfiddle

Источник

Попробуйте добавить таблицу внутри href. Но это не лучший метод.

<tr>        <td style="padding-bottom: 12px;">
                            <a title="Blogartikel Nummer 2" href="#" style="vertical-align: middle">
                                <table>
                                    <tr>
                                        <td>
                                            <img width="80" height="80" class="recent-thumbnail" title="Blogartikel Nummer 2"
                                                src="http://upload.wikimedia.org/wikipedia/commons/b/bf/Lano_Beach_-_Savai%27i,_2007.jpg">
                                        </td>
                                        <td valign="middle">
                                            Blogartikel Nummer 2
                                        </td>
                                    </tr>
                                </table>
                            </a>
                            <div>
                                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
                                tempor invidunt.</div>
                        </td>
                    </tr>
Источник
Другие вопросы по тегам