CSS 图像居中对齐

我们在《CSS 内外边距》学过内容居中，它的原理是将外边左右设置为auto。图像居中也是这个原理。

示例

<!DOCTYPE html>

<html>

<head>

<title>图像居中</title>

<meta charset="UTF-8">

<style type="text/css">

img.align-center { /*图像居中对齐*/

display: block; /*图像块显示*/

margin: 0px auto;}

img.medium { /*图像中等大小显示*/

width: 250px;

height: 250px;}

</style>

</head>

<body>

<h1>软件开发，成就梦想</h1>

<h2>学编程，上利永贞网 https://www.liyongzhen.com/</h2>

<p><img src="https://www.0735it.net/images/kc/jspservlet.jpg" alt="Servlet/JSP课程" class="align-center medium" />

<b><i>Servlet</i></b

> 用Java编写的服务器端程序，可以交互式地浏览和修改数据，生成动态Web内容。是Java企业级应用技术第一站。</

p>

</body>

</html>