知优码

您现在的位置是:首页 > WEB相关 > html文档

html文档

使用css实现html内图片水平居中

知优码 2019-11-16html文档
1、关头代码text-align:center此为模式排版属性text-align,值为center居中2、实例使用实古代码

1、关头代码
text-align:center
此为模式排版属性text-align,值为center居中

2、实例使用实古代码


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片居中</title>
<style>
.juzhong{ text-align:center}
</style>
</head>
<body>
<p style="text-align:center"><img src="//www.css5.com.cn/images201610/logo.gif" /></p>
<div class="juzhong"><img src="//www.css5.com.cn/images201610/logo.gif" /></div>
</body>
</html>

居中阐明:

p段落标签里,使用style属性设置text-align:center形式居中CSS名堂。
div标签里,使用class引入外部CSS,而外部CSS .juzhong{ text-align:center}设置装备摆设了居中花色。
岂论P与div均是使用CSS格局模式居中实现图片居中排版,只不过一个是标签直接使用,一个内部样式完成。在以后构造都可依据需要决定使用。