css 设置图片与文字的对齐方式 求教

html-css023

css 设置图片与文字的对齐方式 求教,第1张

1. 这里为什么要用<p>?

答:这里可以不用p标签,用其它标签也可以。p标签是块级元素,所以3个p标签不会在同一行显示,这里主要是为了更直观地向你说明text-align的作用。

2. 纵向对齐方式<p><img src="demo.gif" style="vertical-align">lpsum</p>这里style="vertical-align为什么又可以写到<img>里了呢?

答:因为img标签包含于p标签,所以这里的style="vertical-align:middle的结果是图片相对于p元素纵向居中对齐。

表单的位置如果用表格来安排的话,就比较容易整齐,而且IE6一样效果,不然就要用很多定位来控制各个元素。

表单行内对齐.html   代码清单如下:

<!doctype html>

<html lang="zh">

    <head>

        <meta charset="utf-8">

        <title> 表单行内对齐 </title>

        <link rel="stylesheet" href="lineAlignment.css">

    </head>

    <body>

        <table>

            <tr>

                <td class="liLabel"><span>账户类型:</span></td>

                <td>

                <input type="radio" name="f_01" id="" checked value="个人">个人

                <input type="radio" name="f_01" id="" value="企业">企业

                </td>

            </tr>

            <tr>

                <td class="liLabel"><span>用户名:</span></td>

                <td><input type="text" name="userName" id="userName"></td>

            </tr>

       </table>

     </body>

</html>

lineAlignment.css   代码清单如下:

td {

padding: 1em     /*  表格单元格内边距控制行距 */

}

td.liLabel {

text-align: right    /*   控制特定单元格左右对齐  */

}