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. 定义action的允许访问方式

    publicfunction behaviors() { return[ 'verbs'=>[ 'class'=>VerbFilter::className(), 'actions'=&g ...

  2. 2018年4月中旬的PTA(三)

    C高级第三次PTA作业(1) 题目6-1 输出月份英文名 1.设计思路 (1)算法(子函数) 第一步:定义字符型一级指针子函数名getmonth,形参整型n. 第二步:定义长度为12的字符数组指针mo ...

  3. Jacobi-Anger expansion

    [转载请注明出处]http://www.cnblogs.com/mashiqi 2017/06/16 适合于自己的关于Jacobi-Anger expansion的推导方法,这里记下来,方便以后查阅. ...

  4. IC卡触点释放时序

    IC卡触点释放时序过程如下: 要点: 终端必须通过把RST置为低电平状态来启动释放时序: 在置RST为低电平之后VCC断电之前,终端必须将CLK和IO设定为低电平状态: 在置RST.CLK和IO为低电 ...

  5. 12.python-metaclass元类

    1.python中一切皆是对象,类本身也是一个对象,当使用关键字class的时候,python解释器在加载class的时候会创建一个对象(这里的对象指的是类而非类的实例) class Foo: #cl ...

  6. java-Collection集合、List集合、Vector集合和迭代器Iterator、ListIterator的使用

    1.对象数组的概述和使用 * A:案例演示 * 需求:我有5个学生,请把这个5个学生的信息存储到数组中,并遍历数组,获取得到每一个学生信息. * Student[] arr = new Student ...

  7. C++学习（三十六）（C语言部分）之 链表2

    测试代码笔记如下: #include<stdio.h> #include<stdlib.h> typedef struct node { int data;//数据 struc ...

  8. ios-项目启动页面

    项目运行启动页面: 点工程项目targets-(或Images.xcasets)-LaunchImage(iphone四种规格图片:320*480/350*568/640*960/640*1136)将 ...

  9. webpack学习笔记（三）

    访问网址: https://github.com/webpack/analyse "scripts": { "dev-build": "webpack ...

  10. PythonStudy——Pycharm 小技巧

    分享Pycharm中一些不为人知的技巧 工欲善其事必先利其器,Pycharm 是最受欢迎的Python开发工具,它提供的功能非常强大,是构建大型项目的理想工具之一,如果能挖掘出里面实用技巧,能带来事半 ...