默认情况下，图像属于内联元素。这意味着它们与周围的文本一起流动。为使图像居中，我们应该将其转换成块级元素，通过将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. Link-Cut Tree(LCT)&TopTree讲解

    前言: Link-Cut Tree简称LCT是解决动态树问题的一种数据结构,可以说是我见过功能最强大的一种树上数据结构了.在此与大家分享一下LCT的学习笔记.提示:前置知识点需要树链剖分和splay. ...

  2. Luogu5055 【模板】可持久化文艺平衡树（fhq-treap）

    注意下传标记时也需要新建节点.空间开的尽量大. #include<iostream> #include<cstdio> #include<cmath> #inclu ...

  3. Assign the task HDU - 3974（dfs序+线段树）

    There is a company that has N employees(numbered from 1 to N),every employee in the company has a im ...

  4. java BigDecimal加减乘除 与 保留两位小数

    BigDecimal bignum1 = new BigDecimal("10"); BigDecimal bignum2 = new BigDecimal("5&quo ...

  5. 11 Zabbix Item类型之Zabbix Calculated 计算型Item类型

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 11 Zabbix Item类型之Zabbix Calculated 计算型Item类型 计算类型 ...

  6. Dominator Tree & Lengauer-Tarjan Algorithm

    问题描述 给出一张有向图,可能存在环,对于所有的i,求出从1号点到i点的所有路径上的必经点集合. 什么是支配树 两个简单的小性质—— 1.如果i是j的必经点,而j又是k的必经点,则i也是k的必经点. ...

  7. 【BZOJ2484】[SDOI2011]打地鼠（暴力）

    [BZOJ2484][SDOI2011]打地鼠(暴力) 题面 BZOJ 洛谷 题解 看到数据范围这题就应该是一个暴力题了. 先考虑假如我们知道了锤子的大小\(R*C\),那么显然只需要从左上角开始从左 ...

  8. 【转】Linux 移动或重命名文件/目录－mv 的10个实用例子

    熟悉了 复制命令,下一个相关的命令就是 mv 命令.当你想要将文件从一个位置移动到另一个地方并且不想复制它,那么mv 命令是完成这个任务的首选. 初识 mv 命令 mv 命令是一个与cp类似的命令,但 ...

  9. 洛谷 P1452 Beauty Contest 解题报告

    P1452 Beauty Contest 题意 求平面\(n(\le 50000)\)个点的最远点对 收获了一堆计算几何的卡点.. 凸包如果不保留共线的点,在加入上凸壳时搞一个相对栈顶,以免把\(n\ ...

  10. Problem C: 文体双花 解题报告

    Problem C: 文体双花 被A穿的题,我这个屑只拿了20... 意识到这个题简单的时候考试已经快结束了,那边又各种吵,不过下午改题的情况来看,我可能码力还有点问题... 据神O所说,出这个题的时 ...