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>

CSS 图像居中对齐的更多相关文章

  1. 利用CSS实现居中对齐

    1. 文本居中 首先编写一个简单的html代码,设置一个类名为parentDiv的div对象.html代码如下: <div class="parentDiv"> 这里随 ...

  2. CSS 图像左右对齐

    左右对齐图像使用的技术是浮动div元素. float:left 左对齐 float:right右对齐 示例 <!DOCTYPE html> <html>     <hea ...

  3. CSS上下左右居中对齐

    上下左右居中对齐 display:  inline/inline-block 将父元素(容器)设定 text-align: center: 即可左右置中. display: block 将元素本身的 ...

  4. CSS居中对齐

    CSS实现居中对齐的几种方式 页面布局中,居中对齐是我们经常遇到的场景,现在总结几个常用的方式供大家参考. 场景一:按钮文字居中对齐,line-height + text-align html代码: ...

  5. CSS position &居中（水平，垂直）

    css position是个很重要的知识点: 知乎Header部分: 知乎Header-inner部分: position属性值: fixed:生成绝对定位的元素,相对浏览器窗口进行定位(位置可通过: ...

  6. 使用css将图像居中

    默认情况下,图像属于内联元素.这意味着它们与周围的文本一起流动.为使图像居中,我们应该将其转换成块级元素,通过将display属性的值设置为block就可以完成转换. <html> < ...

  7. 【css对齐】块内或者行内图片与文字居中对齐最靠谱的方式！

    块内或者行内图片与文字居中对齐最靠谱的方式! 做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完美的对齐下面给个代码 首先是html: <p class="btnU ...

  8. CSS居中对齐终极指南

    本文首发于我的公众号:前端新世界 欢迎关注 本文将讨论可用于居中对齐元素的6种CSS技术(按照最佳实践排序),以及每一种技术最适合应用的场景.这里,居中对齐指的是将元素放置在其父元素的水平和垂直中心. ...

  9. HTML学习笔记——各种居中对齐

    0.前言     水平居中基本方法--指定块的宽度并设定块的左右外边距为auto,上下外边距可取0,那么该块能够在父元素中水平居中. 样式例如以下: 1:margin:0px auto 2:margi ...

随机推荐

  1. Java面试通关秘籍汇总集

    一.基础篇 1.1.Java基础 面向对象的特征:继承.封装和多态 final, finally, finalize 的区别 Exception.Error.运行时异常与一般异常有何异同 请写出5种常 ...

  2. 关于Jordan标准形

    [转载请注明出处]http://www.cnblogs.com/mashiqi 2017/06/25 设$A$是$n$维线性空间$V$上的线性变换,它的特征值与相应的代数重数分别为$\lambda_i ...

  3. SpringBoot下如何配置实现跨域请求？

    一.什么是跨域请求? 跨域请求,就是说浏览器在执行脚本文件的ajax请求时,脚本文件所在的服务地址和请求的服务地址不一样.说白了就是ip.网络协议.端口都一样的时候,就是同一个域,否则就是跨域.这是由 ...

  4. OpenCV实现彩色图像轮廓 换背景颜色

    转摘请注明:https://i.cnblogs.com/EditPosts.aspx?opt=1 有时候我们需要不一样颜色的证件照,下面就用OpenCV来实现证件照的蓝底.红底等换颜色: 代码如下: ...

  5. Python全栈之路----常用模块----time模块

    time 模块的方法 time.time():返回当前时间的时间戳. >>> import time >>> time.time() #从1974年到现在过去了多少 ...

  6. C#词频统计 效能分析

    在邹老师的效能分析的建议下对上次写过的词频统计的程序进行分析改进. 效能分析:个人很浅显的认为就是程序的运行效率,代码的执行效率 1.VS 提供了自带的分析工具:performance tool (性 ...

  7. 解决使用C/C++配置ODBC链接使用SQLConnect返回-1

    VS中建立空项目使用ODBC连接时,SQLConnect函数总是返回-1,mysql和命令行连接数据库都是没问题的 retcode = SQLConnect(hdbc, (SQLCHAR*)" ...

  8. 工作中 sql 整理（一）

    这篇文章记录关于SQL的内容,有些凌乱,是工作中点滴的积累,只能按照时间顺序,逐次记录. 一.update 关联更新 1.需求 Table A   TableB A表中的主键和B表中的主键相关联,关联 ...

  9. pam模块初探

  10. How to create an rpm package

    转自:https://linuxconfig.org/how-to-create-an-rpm-package Rpm is both the package manager and the pack ...