下面的例子展示了你如何设置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（Cascading Style Sheets）是一种用于控制网页元素样式的重要技术，其中包括对图片的对齐方式设置。本案例通过两个具体的实例详细介绍了如何使用CSS来实现图片的横向和纵向对齐。 首先，我们来看...
标题中的“CSS设置图片的对齐方式”是指在网页设计中使用CSS（层叠样式表）来调整图像在页面上的布局位置，确保它们能够与文本或其他元素协调一致。描述中的关键词“计算机”表明这是关于计算机网页设计的基础知识。...
【CSS3名片式卡片设计特效】是一种常见的网页元素，它以直观、美观的方式展示信息，常用于个人简介、产品展示或项目介绍等场景。在这款特效中，通过利用CSS3的强大功能，我们可以创建出带有图像、图标、标题和描述...
css文本样式：使用text-decoration添加文本修饰，text-indent：2em添加首行缩进俩字符，line-height设置行间距，letter-spacing设置字符间距，word-spacing设置英文单词间距，text-align设置文本对齐方式；...
- `text-align`: 设置文本的水平对齐方式。 - 取值：`left`（左对齐）、`right`（右对齐）、`center`（居中对齐）、`justify`（两端对齐）。 - **文本缩进的属性** - `text-indent`: 设置首行文本的缩进量。 - ...
使用CSS有以下显著优势： 1. 内容与表现分离：CSS使得HTML仅负责结构，样式则通过CSS来定义，提高了代码的可读性和维护性。 2. 统一的表现：通过一套CSS，可以实现整个网站的一致性，只需修改一处，全局生效。 3. 多...
例如，下面的代码将段落元素的文本对齐方式设置为居中，并将文字颜色设置为红色： ```css p { text-align: center; color: red; } ``` 为了提高可读性，通常会将每个属性单独写在一行上，如下所示： ```css p { ...
### CSS3秘笈知识点概述 #### 一、CSS选择器 - **基本选择器**：包括类型选择器（如 `div`）、类选择器（如 `.example`）、ID选择器（如 `#unique`）。 - **组合选择器**：如后代选择器（`div p`），子代选择器（`...
3. **元素样式初始化**：针对常见的HTML元素，如`h1`到`h6`标题、段落`p`、列表`ul`和`ol`、链接`a`等，进行统一的样式设置，如文本颜色、字体、对齐方式等。 4. **清除浮动**：为了避免浮动元素导致的父级元素高度...
+ text-align：设置文本对齐方式。 + text-indent：设置首行缩进。 + line-height：设置行高。 + letter-spacing：设置字符间距。 + color：设置文字颜色。 DIV标记 DIV标记用于表示一块可显示HTML信息的区域...
CSS3的布局技术如Flexbox或Grid也可用于控制这些元素的排列和对齐方式。 ### 图片资源与背景 在`images`文件夹中，可能包含了提示框的图标或者背景图片。CSS3提供了多种方式处理背景图片，例如`background-image`...
本篇文章将深入探讨如何使用纯CSS3实现一个响应式的水平时间轴布局。 首先，我们需要理解时间轴的基本结构。时间轴通常由一条主轴线（时间线）和沿线分布的节点（时间点）组成。在HTML中，我们可以使用`<ul>`和`...
本文将深入探讨如何使用CSS3创建一个垂直时间轴，以及实现这一功能的关键技术点。 首先，我们要了解CSS3中的基本概念。CSS3是层叠样式表（Cascading Style Sheets）的第三版，引入了许多新的特性和功能，包括选择器...
- **含义：** 设置元素水平对齐方式。 - **举例：** ```css p { text-align: right; } ``` #### text-indent - **含义：** 设置首行文本的缩进。 - **举例：** ```css p { text-indent: 20px; } ``` ###...
1. **Flexbox（弹性盒模型）**：提供了一种更灵活的布局方式，允许元素在行或列中自动对齐和调整大小。 2. **Grid布局**：用于创建二维网格系统，方便处理复杂的网页布局。 3. **CSS变量（Custom Properties）**：...
3. **定位**：CSS2.0提供了相对定位(relative)、绝对定位(absolute)和固定定位(fixed)三种定位方式。相对定位相对于其正常位置移动，而绝对定位相对于最近的非静态定位祖先元素定位，固定定位则始终相对于浏览器窗口...
CSS的主要作用是实现网页的布局和外观设计，使网页元素呈现出各种样式效果，如字体大小、颜色、对齐方式、边框、背景图像等。通过CSS，网页设计者可以精确控制页面的布局，使得内容和表现分离，提高了网页的可维护性...
例如，`font-size`用于设置字体大小，`text-align`控制文本对齐方式，`background-color`设置背景颜色，`position`定义元素的位置，`width`和`height`设定元素尺寸，`margin`则调整元素周围的空间。 - **选择符**...
3. 设置固定宽度：可以使用width:100px;来设置固定宽度。 4. 临时加边框：可以使用border:1px solid;来临时加边框。 5. 使用!important;来设置IE和FF不同的样式。 6. 判断IE浏览器版本调用不同的样式表：可以使用 <!...
7. **图像和媒体**：CSS2.0允许使用`background-image`插入背景图片，还可以用`@import`规则导入外部样式表，以及处理媒体查询（虽然CSS3对此进行了更深入的扩展）。 8. **列表和表格**：针对列表和表格，CSS2.0...