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. MVVM设计模式加RAC响应式编程

    一:为什么要用MVVM? 为什么要用MVVM?只是因为它不会让我时常懵逼. 每次做完项目过后,都会被自己庞大的ViewController代码吓坏,不管是什么网络请求.networking data ...

  2. ssh: connect to host gitlab.alpha.com port 22: Network is unreachable

    在这里只说明我遇到的问题和解决方法,可能并不能解决你遇到的问题: git clone git@gitlab.alpha.com:ipcam/ambarella.gitCloning into 'amb ...

  3. BZOJ - 3170： 松鼠聚会 （切比雪夫转曼哈顿距离）

    pro:  有N个小松鼠,它们的家用一个点x,y表示,两个点的距离定义为:点(x,y)和它周围的8个点即上下左右四个点和对角的四个点,距离为1.现在N个松鼠要走到一个松鼠家去,求走过的最短距离.0&l ...

  4. Arch Linux pacman 与其他发行版操作比较

    原文:https://wiki.archlinux.org/index.php/Pacman/Rosettahttps://old-en.opensuse.org/Software_Managemen ...

  5. lsof一些使用

    查看某进程和哪些文件相关 [root@linux-node2 ~]# netstat -lntp Active Internet connections (only servers) Proto Re ...

  6. 在C#中如何判断线程当前所处的状态

    在C#中,线程对象Thread使用ThreadState属性指示线程状态,它是带Flags特性的枚举类型对象.   ThreadState 为线程定义了一组所有可能的执行状态.一旦线程被创建,它就至少 ...

  7. Day 08 文件操作模式，文件复制，游标

    with open:将文件的释放交给with管理 with open('文件', '模式', encoding='utf-8') as f:    # 操作    pass​ a模式:追加写入 # t ...

  8. ssh 制作免密登录（免密登录多台服务器）

    场景:服务器B (192.168.1.101)免密登录A(192.168.1.100)服务器 1.登录服务器B ①生产公钥 ssh-keygen -t rsa Enter file in which ...

  9. [ZZ] 麻省理工( MIT)大神解说数学体系

    麻省理工( MIT)大神解说数学体系 http://blog.sina.com.cn/s/blog_5ff4fb7b0102e3p6.html 其实每一门学科都应该在学习完成后,在脑子里面有一个体系, ...

  10. 如何在Windows命令行（DOS界面）中调用 编译器 来编译C/C++源程序

    首先说明一下背景: 为什么要在DOS界面编译C/C++源程序?有很多现成的开发环境(IDE)如:vs, vc++等,这些开发环境集成了编译,调试,使用起来很方便,而且图形化操作界面,简洁明了.但是在开 ...