您的位置:首页 > HTML入门 > 【 返回上一页

html图片居中_html图片水平居中

html网页排版使用什么实现图片居中html中文章发布时出现图片让其居中,使用什么方法实现?这里教大家不同方法,应对不同时候出现图片居中需求。

html图片居中 html网页中图片水平居中方法

html水平图片居中,有两种方法,一种html标签内使用比较常用而且直接的方法 align="center", 另外一种即使有CSS实现图片居中。

一、标签内 使用align属性设置图片居中

1、关键代码
align="center"
可直接对标签使用,比如divptable

2、图片居中实例代码

<p align="center"><img src="http://www.thinkcss.com/images201610/logo.gif" /></p>
<div align="center"><img src="http://www.thinkcss.com/images201610/logo.gif" /></div>

以上在div和p内都放img图片,图片为thinkcss的logo,对p和div内使用align="center"实现内容居中,自然图片也居中了。

3、效果截图

实现html图片居中
实现html中图片居中

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

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="http://www.thinkcss.com/images201610/logo.gif" /></p>
<div class="juzhong"><img src="http://www.thinkcss.com/images201610/logo.gif" /></div>
</body>
</html>

居中说明:

p段落标签里,使用style属性设置text-align:center内容居中CSS样式。
div标签里,使用class引入外部CSS,而外部CSS .juzhong{ text-align:center}设置了居中样式。
无论P和div均是使用CSS样式内容居中实现图片居中排版,只是一个是标签直接使用,一个外部样式实现。在以后布局均可根据需求选择使用。

css实现Html图片居中布局
css实现Html 图片居中布局

三、总结

无论使用标签内使用 align="center"居中也好,使用CSS text-align:center居中也好,均可,只需要在布局时候,文章排版时候选择实用方便方法即可。

通常在发布文章时候要让文章中出现图片居中,一般采用第一种方法标签直接使用align="center"实现图片水平居中,如果是网页排版布局要让HTML排版图片居中,那就使用CSS text-align实现。

如需转载,请注明文章出处和来源网址:https://www.thinkcss.com/html/1374.shtml

修订日期:2017-07-11 17:02 css学习与资料网 thinkcss原创