Question

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

谢谢！：）

Answer 1

使用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/

Answer 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

Answer 3

尝试在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>

在这种情况下，如何对齐图像中间的文本？

3 个答案: