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

<html>

    <head>

        <title>TODO supply a title</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style type="text/css">

            body {

		font-family: Georgia, "Times New Roman", serif;

		color: #665544;}

            img.align-center {

                display: block;

                margin: 0px auto;}

            img.medium {

                width: 250px;

                height: 250px;}

        </style>

    </head>

    <body>

        <div>TODO write content</div>

        <p><img src="magnolia-medium.jpg" alt="Magnolia" class="align-center medium" /><b><i>Magnolia</i></b> is a large genus that contains over 200 flowering plant species. It is named after French botanist Pierre Magnol and, having evolved before bees appeared, the flowers were developed to encourage pollination by beetle.</p>

    </body>

</html>

使用css将图像居中的更多相关文章

  1. CSS 图像居中对齐

    CSS  图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...

  2. css中关于居中的那点事儿

    css中关于居中的那点事儿 关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...

  3. css中各种居中的奇技淫巧总结

    css中各种居中的奇技淫巧总结   第一种,在固定布局中比较常用的技巧设置container的margin:0 auto:   第二种(从布局中入手)   css .outer{ height:200 ...

  4. CSS实现div居中

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. PHP实现的自定义图像居中裁剪函数示例

    图像居中裁减的大致思路: 1.首先将图像进行缩放,使得缩放后的图像能够恰好覆盖裁减区域.(imagecopyresampled ― 重采样拷贝部分图像并调整大小) 2.将缩放后的图像放置在裁减区域中间 ...

  6. PHP 图像居中裁剪函数

    图像居中裁减的大致思路: 1.首先将图像进行缩放,使得缩放后的图像能够恰好覆盖裁减区域.(imagecopyresampled — 重采样拷贝部分图像并调整大小) 2.将缩放后的图像放置在裁减区域中间 ...

  7. 基于jQuery点击图像居中放大插件Zoom

    分享一款基于jQuery点击图像居中放大插件Zoom是一款放大的时候会从原图像的位置以动画方式放大到画面中间,支持点击图像或者按ESC键来关闭效果.效果图如下: 在线预览   源码下载 实现的代码. ...

  8. css布局---各种居中

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  9. CSS背景图像的简单响应

    本文设有很多,最理想的解决方案,响应图像只是其中之一.我们建议您查看不同的方法,然后再选择一个特定的响应图像解决方案,包括这两个:如何避免重复下载响应图像中选择响应图像解决方案. 大家都在谈论的的sr ...

随机推荐

  1. asp.net 连接SQL Server 数据库并进行相关操作

    asp.net 连接数据库,操作数据库主要需要两个类,一个是SqlConnection,一个是SqlCommand SqlConnection用于连接数据库,打开数据库,关闭数据库. 连接数据库需要特 ...

  2. ajax 提交数组 泛型集合（二）

    最近在项目中,使用 mvc架构,model层使用code first 碰见一个问题,前台json传递数据给后台action的复杂对象,发现复杂对象中的list范型集合并没有获取到数据. 研究半天,终于 ...

  3. python 操作系统模块 -- OS

    os,语义为操作系统,模块提供了访问多个操作系统服务的功能,可以处理文件和目录这些我们日常手动需要做的操作.os和它的子模块os.path还包括一些用于检查.构造.删除目录和文件的函数,以及一些处理路 ...

  4. C# 对象与JSON字符串互相转换的三种方式

    C# 对象与JSON字符串互相转换的三种方式 JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式. 关于内存对象和JSON字符串的相互转换, ...

  5. Java8的flatMap如何处理有异常的函数

    Java8的flatMap函数,作用是:如果有值,为其执行mapping函数返回Optional类型返回值,否则返回空Optional. 见到的映射函数往往都只有一句话,连大括号都不需要加的,如下: ...

  6. Java“禁止”泛型数组

    Java“禁止”泛型数组 原文:https://blog.csdn.net/yi_Afly/article/details/52058708 1. 泛型定义泛型编程是一种通过参数化的方式将数据处理与数 ...

  7. MT【242】图像几何意义

    设函数$f(x)=x^2+ax+b$,已知函数$f(x)$在$[-1,1]$上存在零点,若$0\le b-2a\le 1$,求$b$的范围 (2015浙江文科高考20(2)) 分析:理解成$g(x)= ...

  8. python 和 scikit-learn 实现垃圾邮件过滤

    文本挖掘(Text Mining,从文字中获取信息)是一个比较宽泛的概念,这一技术在如今每天都有海量文本数据生成的时代越来越受到关注.目前,在机器学习模型的帮助下,包括情绪分析,文件分类,话题分类,文 ...

  9. 【POJ1187】陨石的秘密

    题目大意: 定义一个串:只含有 '( )','[ ]','{ }',3种(6个)字符. 定义 SS 串: 空串是SS表达式. 若A是SS表达式,且A串中不含有中括号和大括号,则(A)是SS表达式. 若 ...

  10. 硬盘读取速度变慢 — 当前传送模式: PIO模式

    网上搜索了一下,找到两篇文章: 标题:硬盘读取速度变慢 当前传输模式pio的解决方法 http://www.veryhuo.com/a/view/52786.html   (解决思路:先卸载驱动,重启 ...