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

    我常用的2个方案,其实性质是一样的 方案1,使用过滤器 ActionFilterAttribute,这个就不细说了,比较方便. 实现一个继承自ActionFilterAttribute的类,实现OnA ...

  2. Wordpress 之删除 RSS 功能 的"文章RSS"、"评论RSS"、"WordPress.org"

    一. 去除底部“自豪地采用 WordPress”版权信息: 1.打开主题文件夹:wp-content/themes/twentyeleven/footer.php; 2.找到 这段代码 删除即可: & ...

  3. day6 字典

    字典的创建方式 注意 字典是无序的 1. dic{"name":"yang","age":35} 常用还是用这个 2. dic3 = dic ...

  4. AtCoder Regular Contest 063 F : Snuke’s Coloring 2 (线段树 + 单调栈)

    题意 小 \(\mathrm{C}\) 很喜欢二维染色问题,这天他拿来了一个 \(w × h\) 的二维平面 , 初始时均为白色 . 然后他在上面设置了 \(n\) 个关键点 \((X_i , Y_i ...

  5. 金三银四：蚂蚁金服JAVA开发面试题及答案之一面（持续更新

    一面 1.自我介绍.自己做的项目和技术领域 开放题 2.项目中的监控:那个监控指标常见的有哪些? 答:CPU.内存.IO 等等.建议下载个nmon工具,里面有各个指标. 数据库:Mysql(缓存命中. ...

  6. 架构师成长之路6.1 DNS理论

    点击返回架构师成长之路 架构师成长之路6.1 DNS理论 1.DNS一些基本概念       ① FQDN:Full Qualified Domain Name,完全限定域名,即每个域在全球网络都是唯 ...

  7. cf1000D Yet Another Problem On a Subsequence (dp)

    设f[i]是以i为开头的好子序列的个数 那么有$f[i]=\sum\limits_{j=i+a[i]+1}^{N+1}{f[j]*C_{j-i-1}^{a[i]}}$(设f[N+1]=1)就是以i为开 ...

  8. word中批量修改图片大小的两个方法

    前言: 对于把ppt的内容拷贝到word中: 对ppt的一页进行复制,然后粘贴到word中 如果要的是ppt运行过程中的内容,在qq运行的情况下,按Ctrl+Alt+A截屏,按勾,然后可以直接粘贴到w ...

  9. MQTT 及其 测试工具

    协议说明书:https://mcxiaoke.gitbooks.io/mqtt-cn/content/mqtt/04-OperationalBehavior.html 官网提供了很多的broker模拟 ...

  10. 集合总结（全是代码）----------java基础学习

    前言:在刚学习的时候,切记不能粘贴复制,更不能眼高手低,再简单的代码,都要自己独立动手写. 第一步:目录结构 第二步:代码区 Student.java:(一个学生的实体类) package com.m ...