2

我有这个 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/

谢谢！:)

4

3 回答 3

2

采用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属性应用于 span。

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

于 2013-02-14T09:25:04.877 回答
2

您可以将它们包装在容器中并将容器设置为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

于 2013-02-14T09:34:51.390 回答
0

尝试在 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>
于 2013-02-14T09:35:08.893 回答