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. IOS Block代码块的定义与使用

    代码块的本质是和其他的变量类似,不同的是,代码块存储的数据是一个函数体.使用代码块,你可以像调用其他标准函数一样的调用,可以传入参数,并得到返回值.     脱字符是代码块的语法标记.下图表示代码块的 ...

  2. win10下VM 中centos 安装共享文件

    一.  安装VMware Tools VMwareTools的安装脚本是要使用到perl的,而CentOS 6自身不带perl,所以需要自己安装.可以自己下载源代码编译,也可以直接用yum来安装. y ...

  3. 多设备同时进行monkey抗压测试

    adb工具操作monkey抗压测试. 首先得安装adb工具,且配置好环境配置.推荐链接: 安装方法:https://blog.csdn.net/L_201607/article/details/781 ...

  4. 用Redis存储Tomcat集群的Session实现session共享

    一.存储 前段时间,我花了不少时间来寻求一种方法,把新开发的代码推送到到生产系统中部署,生产系统要能够零宕机.对使用用户零影响. 我的设想是使用集群来搞定,通过通知负载均衡Nginx,取下集群中的To ...

  5. 回顾ThreadLocal

    ThreadLocal作为解决特定场景下并发的一种方案,在Spring等框架及面试中经常会被问到,它是Java必须要掌握的基础知识之一. ThreadLocal类的作用是抽象线程内变量的抽象,这类对象 ...

  6. DL服务器主机环境配置(ubuntu14.04+GTX1080+cuda8.0)解决桌面重复登录

    DL服务器主机环境配置(ubuntu14.04+GTX1080+cuda8.0)解决桌面重复登录 前面部分是自己的记录,后面方案部分是成功安装驱动+桌面的正解 问题的开始在于:登录不了桌面,停留在重复 ...

  7. centos7启动过程及systemd详细说明

    开机启过程 POST->BOOT SEQUENCE-> BOOTLOADER->KERNEL + INITRAMFS(INITRD)->ROOTFS->/sbin/ini ...

  8. [转帖][分享] 关于系统DIY--by 原罪

    http://wuyou.net/forum.php?mod=viewthread&tid=399277&extra=page%3D1 前几天我发了一个帖子<Windows组件w ...

  9. 理解OpenShift（3）：网络之 SDN

    理解OpenShift(1):网络之 Router 和 Route 理解OpenShift(2):网络之 DNS(域名服务) 理解OpenShift(3):网络之 SDN 理解OpenShift(4) ...

  10. 理解OpenShift（4）：用户及权限管理

    理解OpenShift(1):网络之 Router 和 Route 理解OpenShift(2):网络之 DNS(域名服务) 理解OpenShift(3):网络之 SDN 理解OpenShift(4) ...