Html:如何将文本与居中图像左对齐?

时间:2011-09-14 06:58:05

标签: html alignment

我需要在我的网页上执行以下操作:

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

我完全不知道该怎么做。到目前为止,我所尝试的所有内容都导致了文本,即应该与图像的左边缘对齐,以便居中:(

由于

4 个答案:

答案 0 :(得分:1)

将文本和图像放在一个div元素中。将div居中,并将文本左对齐。

答案 1 :(得分:0)

  1. 普通文本--->以正常方式提供,即无填充

  2. 某些文字与图片左边对齐--->给左边填充

  3. 居中图片----->给对齐中心

答案 2 :(得分:0)

试试这个:

<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>

答案 3 :(得分:0)

试试这个:让我们说,你的图片大小: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

的更多信息