换个排列方式 - 使用text-align设置文本对齐方式，初识HTML(5)+CSS(3)教程-慕课网

11-5 换个排列方式 - 使用text-align设置文本对齐方式

本节编程练习不计算学习进度，请电脑登录imooc.com操作

换个排列方式 - 使用text-align设置文本对齐方式

想为块状元素中的文本、图片设置居中样式吗？可以使用text-align样式代码，如下代码可实现文本居中显示。(那么什么是块状元素呢？在后面的12-1、12-2小节中会讲到。)

h1{
    text-align:center;
}
<h1>了不起的盖茨比</h1>

同样可以设置居左：

h1{
    text-align:left;
}
<h1>了不起的盖茨比</h1>

还可以设置居右：

h1{
    text-align:right;
}
<h1>了不起的盖茨比</h1>

任务

我来试一试：

为图片设置水平居中显示

index.html

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>对齐方式</title>
    <style type="text/css">
 
    </style>
</head>
 
<body>
    <div><img src="http://img1.sycdn.imooc.com//52b4113500018cf102000200.jpg"></div>
</body>
 
</html>