默认情况下，图像属于内联元素。这意味着它们与周围的文本一起流动。为使图像居中，我们应该将其转换成块级元素，通过将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. BZOJ1774[USACO 2009 Dec Gold 2.Cow Toll Paths]——floyd

    题目描述 跟所有人一样,农夫约翰以着宁教我负天下牛,休叫天下牛负我的伟大精神,日日夜夜苦思生 财之道.为了发财,他设置了一系列的规章制度,使得任何一只奶牛在农场中的道路行走,都 要向农夫约翰上交过路费 ...

  2. ASP.NET MVC5使用Area区域

    转载:http://www.lanhusoft.com/Article/217.html 在大型的ASP.NET mvc5项目中一般都有许多个功能模块,这些功能模块可以用Area(中文翻译为区域)把它 ...

  3. 自学Zabbix6.1 Event acknowledgment 事件确认

    自学Zabbix6.1 Event acknowledgment 事件确认 1 概述以往服务器出现报警,运维人员处理完事之后,报警自动取消,但是下一次出现同样一个错误,但是换了一个运维人员,他可能需要 ...

  4. 【BZOJ1822】[JSOI2010]冷冻波（二分，网络流）

    [BZOJ1822][JSOI2010]冷冻波(二分,网络流) 题面 BZOJ 洛谷 题解 先预处理每个巫妖可以打到哪些小精灵,然后二分答案,网络流判定即可. #include<iostream ...

  5. Sharepoint 性能之SQL Server内存设置

    In this article, let's understand the Minimum and Maximum server memory settings of SQL Server. The ...

  6. 逆向---03.mov、test等汇编指令、EAX、关键Call、OD调试技巧

    上一篇:逆向---02.je & jmp & jnz .OD调试 基础知识:(栗子中也会说的)栗子:链接: https://pan.baidu.com/s/1qZbbTvQ 密码: i ...

  7. 树莓派上使用mdk3对无线热点进行DoS攻击

    写在前面 你必须确保你的无线网卡支持监听模式(混淆模式),树莓派板载的无限网卡是不支持的.所以你必须额外安装一个支持监听模式的USB无线网卡. 安装mdk3 安装sudo apt install md ...

  8. HDU 3416 Marriage Match IV （最短路径，网络流，最大流）

    HDU 3416 Marriage Match IV (最短路径,网络流,最大流) Description Do not sincere non-interference. Like that sho ...

  9. HDU 3081 Marriage Match II （二分图，并查集）

    HDU 3081 Marriage Match II (二分图,并查集) Description Presumably, you all have known the question of stab ...

  10. typescript函数(笔记非干货)

    函数类型 Function Type 为函数定义类型 Define types for functions 我们可以给每个参数添加类型之后再为函数本身添加返回值类型. TypeScript能够根据返回 ...