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. python用schedule模块实现定时任务

    1 import schedule 2 import time 3 4 def test(): 5 print("I'm working...") 6 def test2(): 7 ...

  2. 【Java】字节数组转换工具类

    import org.apache.commons.lang.ArrayUtils; import java.nio.charset.Charset; /** * 字节数组转换工具类 */ publi ...

  3. Span<T>和ValueTuple<T>性能是.Net Core非常关键的特性

    Span<T>和ValueTuple<T> 性能是.Net Core一个非常关键的特性,今天我们重点研究一下ValueTuple<T>和Span<T>. ...

  4. EtherCAT 要点

    倍福: 1.倍福的每个从站模块(IO模块)一般都有转换时间而这些时间会导致从站模块输出数值存在延迟,举例:当在15:00开始调用API让主站板卡输出数据,而用示波器实际检测到模块输出数值的时间大约在1 ...

  5. java_oop_类

    类的初始化顺序    再论类的组成    类的初始化顺序详解        变量        实例变量(成员变量)        类变量(静态变量)    方法        实例方法       ...

  6. django中多个app放入同一文件夹apps

    开发IDE:pycharm 新建一个apps文件夹 需要整理的app文件夹拖到同一个文件夹中,即apps.(弹出对话框,取消勾选Search for references) 在pycharm 中,右键 ...

  7. 新系统centos7重启网络报错

    场景: 在不知名云上新弄的centos7,改了IP之后启动不起来,使用systemctl status network查看结果如下:       排查过程:   1)NetworkManager是否关 ...

  8. 活学活用wxPython基础框架

    看活活用wxpython这本书,基本框架是这样子的,这里有定义输出,然后打印出整个流程,可以看到是怎样执行的,明天请假了,五一回去玩几天,哈哈,估计假期过来都忘了 import wx import s ...

  9. Centos6.5安装mariadb的坑坑

    最近在看Ansible,<Ansible权威指南>,然后有个地方是搭建Web应用框架,有个服务器是安装Mariadb,找到官方文档,一直弄,总是报错,换个思路,下载rpm到本地,安装,然后 ...

  10. Docker之 数据持久化

    容器中数据持久化主要有两种方式: 数据卷(Data Volumes) 数据卷容器(Data Volumes Dontainers) 数据卷 数据卷是一个可供一个或多个容器使用的特殊目录,可以绕过UFS ...