用CSS3设置P的对齐方式

最新推荐文章于 2024-09-19 09:19:06 发布

zlpx1983

最新推荐文章于 2024-09-19 09:19:06 发布

阅读量1.5k

点赞数

分类专栏： css 文章标签： CSS

本文链接：https://blog.csdn.net/zlpx1983/article/details/84176618

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

下面的例子展示了你如何设置P标签的对齐方式，采用text-align。

<!DOCTYPE html>
<html>
<head>
    <title>Setting the text alignment on a text element using CSS</title>
    <style type="text/css">
        #appControlBar {
            background: #ccc;
            padding: 5px;
        }
        body {
            margin: 0;
        }
        p {
            border: 1px solid #ccc;
            margin: 20px;
            text-align: left;
            line-height: 1.2em;
        }
    </style>
</head>
<body>
 
    <div id="appControlBar">
        <label >text-align:
            <select id="sel1" οnchange="algn_changeHandler();">
                <option>left</option>
                <option>right</option>
                <option>center</option>
                <option>justify</option>
            </select>
        </label>
    </div>
 
    <p id="para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies, lorem vitae iaculis lobortis, nunc libero rhoncus metus, vel auctor tortor nisi non quam. Nunc rutrum aliquam massa at ornare. Vivamus fringilla sapien ut diam lobortis consectetur. Maecenas iaculis risus at urna malesuada commodo ornare est volutpat. Suspendisse eget tristique magna. Nam sapien velit, pulvinar eu imperdiet ac, ullamcorper a turpis. Maecenas in quam erat. Aliquam elementum lorem quis est cursus mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut fermentum congue pharetra.</p>
 
    <script type="text/javascript">
        function algn_changeHandler() {
            document.getElementById("para1").style["text-align"] = document.getElementById("sel1").value;
        }
    </script>
 
</body>
</html>

源码下载：

setting-the-text-alignment-on-a-text-element-using-css.zip