默认情况下，图像属于内联元素。这意味着它们与周围的文本一起流动。为使图像居中，我们应该将其转换成块级元素，通过将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. Linux管理用户和组

    用户管理相关命令useradd        添加用户adduser        添加用户userdel         删除用户passwd         为用户设置密码usermod      ...

  2. BZOJ4652 NOI2016循环之美（莫比乌斯反演+杜教筛）

    因为要求数值不同,不妨设gcd(x,y)=1.由提示可以知道,x/y是纯循环小数的充要条件是x·klen=x(mod y).因为x和y互质,两边同除x,得klen=1(mod y).那么当且仅当k和y ...

  3. webapi Get Post

    转载:http://www.cnblogs.com/Juvy/p/3903974.html 在WebAPI中,请求主体(HttpContent)只能被读取一次,不被缓存,只能向前读取的流. 举例子说明 ...

  4. Tunnel Warfare HDU - 1540（线段树最长连续区间）

    题意: 一条线上的点,D x是破坏这个点,Q x是表示查询以x所在的最长的连续的点的个数,R是恢复上一次破坏的点.   解析: 线段树结点 设置一个  lq记录区间左端点开始的最大连续个数,  rq ...

  5. （转）poj算法做题顺序

    初期: 一.基本算法: (1)枚举. (poj1753,poj2965) (2)贪心(poj1328,poj2109,poj2586) (3)递归和分治法. (4)递推. (5)构造法.(poj329 ...

  6. 自学Linux Shell3.3-列表命令ls

    点击返回 自学Linux命令行与Shell脚本之路 3.3-列表命令ls ls命令用于显示文件目录列表,和Windows系统下DOS命令dir类似.当执行ls命令时,默认显示的只有非隐藏文件的文件名. ...

  7. linux-shell数据重定向详细分析

    在了解重定向之前,我们先来看看linux 的文件描述符.linux文件描述符:可以理解为linux跟踪打开文件,而分配的一个数字,这个数字有点类似c语言操作文件时候的句柄,通过句柄就可以实现文件的读写 ...

  8. 【CH5302】金字塔 区间DP

    题目大意:给定一棵树,树上点有标记,给定一棵树的\(dfs\)序标记序列,求有多少种可能的子树形态.(子树之间有序) 这是一道区间计数类DP,涉及到树的\(dfs\)序. 这道题区间的划分点 \(k\ ...

  9. Django框架之模板继承和静态文件配置

    一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.html文件,2.把要显示的页面的内容写在这里 ...

  10. max,min,Zip函数（十一）

    zip函数,拉链,传两个有序的参数,将他们一一对应为元祖形式 max,min比较默认比较一个元素,处理的是可迭代对象,相当于for循环取出每个元素进行比较,注意:不同类型之间不可比较 #!/usr/b ...