下面的例子展示了你如何设置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" onchange="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
分享到：
相关推荐
css文本样式：使用text-decoration添加文本修饰，text-indent：2em添加首行缩进俩字符，line-height设置行间距，letter-spacing设置字符间距，word-spacing设置英文单词间距，text-align设置文本对齐方式；...
style3.css 名为style3的CSS样式文件。 第16章（源代码\第16章） 示例描述：本章演示字体属性用法。 间距与间隔.html 属性间距与间隔用法。 设置行距.html 属性设置行距用法。 字体大小....
使用css样式方式 1.内联样式 行内样式 特点：将css样式定义在HTML标记中 语法： 样式声明：用样式属性和值组成（属性:值;） 常用的样式属性： 1.颜色 属性 ：color 颜色 取值：颜色英文名 2.背景颜色 ...
3、我认为 CSSPeeper最好用的就是快速列出该页面使用的所有色彩包括 Hex 值，对于想知道某个页面主要使用那些色系来说非常方便，而且也不太需要去挖掘 CSS 样式表，除了列出数值外，还直接呈现色彩预览，点选后会...
它支持与文本内容相关的大多数CSS属性，与文本对齐相关的属性除外。 以下是一些带有内联CSS样式的示例HTML内容： < body >< p xss=removed> This is a test </ p>< p xss=removed> So is this </ p>< p xss=...
在 CSS 中，可以使用多种属性来水平对齐元素。 对齐块元素 块元素指的是占据全部可用宽度的元素，并且在其前后都会换行。 块元素的例子： 复制代码代码如下: <h1> <p> <div> 使用 margin 属性来水平对齐 可...
上图为公司自营的一个微信商城的某一部分截图，可以看到红框内部分的文字多行与单行是居中对齐的，我们现在要做的就是使用Vue把里边的文字模块制作成一个可以复用的组件。 首先我们先把css部分拿下来 css: .word-...
《写给大家看的设计书》包含大量的示例，让你了解怎样才能按照自己的方式设计出美观且内容丰富的产品。 《写给大家看的设计书》适用于各行各业需要从事设计工作的读者，也适用于有经验的设计人员。 作者简介 ...
复制代码代码如下: <p class=”elegant”>Our online order form allows you to order directly in the internet, saving your time and offering you convenience. Here’s how you do it.</p> <p class=”elegant...
1. 文本居中 首先编写一个简单的html代码，设置一个类名为...复制代码代码如下:[css]</p> <p>.parentDiv {width:200px;height:100px;border: 1px solid #ececec;text-align:center; /*水平居中*/} 有些时候，你
3.css的背景属性 （1）背景颜色 选择器{ background-color： transparent透明（透明）/color； } （2）背景图片（便于控制位置） 常用于logo 装饰性的小图片或者超大图片 background-image： none（默认） |...
3、实现虚线的CSS重点介绍 border为边框属性，如果要实现对象边框效果，要设置边框宽度、边框颜色、边框样式（实线还是虚线） border:1px dashed #F00 这个就是设置边框样式宽度为1px，虚线，虚线为红色。 4、实例...
2、页面中最好不要用大块背景，能平铺的要平铺，否则加载起来会很慢，也不利于以后的优化和扩展，当然也有些大的网站，现在都尽量把背景统一放到一张图片上，用background-postion来取得背景。3、最好的格式就是gif...
在使用这些标签的时候，我们会发现有些标签可以设置宽度和高度属性（如p标签），有些标签则不可以（如strong标签）。这是因为标签有着特定的类型，不同类型的标签可以设置的属性也不同。 本节将详细讲解标签元素的...
我们通常的做法是，把日期写在span标签里，然后把span标签写在li里，css定义span(float:right)，让span浮动在列表的右边。 近日，被同事问及一个产品列表的做法怎么实现？一个产品列表，每个产品列表后面跟一个...
•我考虑过使用SASS进行样式设置，但是当我尝试使用CSS和HTML时，单元格的对齐进行得很好，尽管代码有些长，但仍继续使用它。 •可以通过s，p，d，f块区分清楚地看到元素周期表。 •对于鼠标悬停或onclick等鼠标...
1.css的引入方式 内部样式： 直接在style里面写 内联样式： 外部样式表 2.css选择器 id选择器： #id名{} Hello World! #para1 { text-align:center; color:red; } ID属性不要以数字开头，数字开头的ID...