簡體   English   中英

HTML:如何使文字與居中圖像左對齊?

[英]Html: How to left-align text with centered image?

我需要在網頁上執行以下操作:

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

我完全不知道該怎么做。 到目前為止,我嘗試過的所有操作都導致文本被認為與圖像的左邊緣對齊,並且也居中:(

謝謝

將文本和圖像放在單個div元素中。 將div居中,然后將其中的文本左對齊。

  1. 普通文本--->以普通方式給出,即不填充

  2. 一些文本與圖像左對齊->左移空白

  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>

試試這個:假設您的圖片大小: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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM