默认情况下，图像属于内联元素。这意味着它们与周围的文本一起流动。为使图像居中，我们应该将其转换成块级元素，通过将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. Django-website 程序案例系列-18 多表跨表操作优化

    详解Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化 在数据库有外键的时候,使用 select_related() 和 pref ...

  2. IDEA 快捷键修改（长期更新）

    最近误操作,导致idea的快捷键没了. 痛定思痛,打算记录一下,以前修改过的key map 搜索一下就好了: 1  代码格式化 -- reformat code:Ctrl+Alt+L(如果按了没反应, ...

  3. 【题解】 Codeforces Edu41 F. k-substrings （字符串Hash）

    题面戳我 Solution 我们正着每次都要枚举从长到短,时间复杂度承受不了,但是我们可以发现一个规律,假设某次的答案为\(x\),那么这个字符串为\(A+X+B\)组成,无论中间的\(X\)是重叠还 ...

  4. Zabbix 添加对交换机端口流量超出阈值的监控

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 22 Zabbix 添加对交换机端口流量超出阈值的监控 本文主要讲解利用zabbix 添加对交换机 ...

  5. 自学Aruba5.3.1-Aruba安全认证-有PEFNG 许可证环境的认证配置OPEN、PSK

    点击返回:自学Aruba之路 自学Aruba5.3.1-Aruba安全认证-有PEFNG 许可证环境的认证配置OPEN.PSK OPEN.PSK都需要设置Initial Role角色, 但是角色派生完 ...

  6. 自学Zabbix9.2 zabbix网络发现规则配置详解+实战

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 自学Zabbix9.2 zabbix网络发现规则配置详解+实战 1.  创建网络发现规则 Conf ...

  7. 【BZOJ1856】[SCOI2010]字符串（组合数学）

    [BZOJ1856][SCOI2010]字符串(组合数学) 题面 BZOJ 洛谷 题解 把放一个\(1\)看做在平面直角坐标系上沿着\(x\)正半轴走一步,放一个\(0\)看做往\(y\)轴正半轴走一 ...

  8. django xadmin

    1.11.13版本下的[安装]: 1.下载分支版本 https://github.com/nocmt/Xadmin1.11.x/archive/master.zip 2.解压,并将其放在site-pa ...

  9. 洛谷P3622 动物园

    题意:给定一个n个元素的圈,m个条件.满足一个条件需要选某些元素或不选另一些元素. 问最多能满足多少条件.每个条件所关联的元素,最远的两个距离不会超过5. 解:想了半天...... 首先能想到断环成链 ...

  10. 辗转相除法求最大公约数(gcd)的斐波那契数列(fib)最坏时间复杂度的证明

    下载地址:http://pan.baidu.com/s/1jIt6UlK