CSS 图像居中对齐

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 >

猜你喜欢

转载自www.cnblogs.com/lszw/p/10725217.html