相对于<img>元素的align特性来说，越来越多的网页设计人员使用float属性来对齐图像。可以采用两种方式来实现对齐。为了确保文本不会与图像的边缘接触，我们经常会给图像增加一个外边距。

<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-left	{

		float: left;

		margin-right: 10px;}

	img.align-right	{

		float: right;

		margin-left: 10px;}

	img.medium {

		width: 250px;

		height: 250px;}

		</style>

	</head>

	<body>

            <p><img src="magnolia-large.jpg" alt="align-right medium" class="align-left 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>

            <p><img src="magnolia-large.jpg" alt="align-right medium"class="align-right medium"/>Some magnolias, such as

                <i>Magnolia stellata</i> and <i>Magnolia soulangeana</i>, flower quite early in the spring before the leaves open.

                Others flower in late spring or early summer, such as <i>Magnolia grandiflora</i>.</p>

	</body>

</html>

使用CSS将图像对齐的更多相关文章

  1. CSS背景图像的简单响应

    本文设有很多,最理想的解决方案,响应图像只是其中之一.我们建议您查看不同的方法,然后再选择一个特定的响应图像解决方案,包括这两个:如何避免重复下载响应图像中选择响应图像解决方案. 大家都在谈论的的sr ...

  2. 【原】css实现两端对齐的3种方法

    说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...

  3. css文字两端对齐

    css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...

  4. css实现两端对齐的3种方法

    两端对齐在移动端非常见,说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐 ...

  5. CSS实现两端对齐效果

    CSS实现两端对齐效果 两端对齐,从概念上来说,其实不难理解.如果不明白什么叫两端对齐,可以玩玩word等办公软件. 下面谈谈如何实现文本的两端对齐.我所知道的大概有以下几种方法 text-align ...

  6. p标签text-align:justify以及CSS文字两端对齐

    p标签样式添加text-align:justify; 那么就会左右对齐. 使用前: 使用后: CSS文字两端对齐 使用前: 代码: <style> div{ width:100px; he ...

  7. css水平垂直居中对齐方式

    1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...

  8. CSS背景图像位置属性background-position百分比详解

    百分比值同关键字很接近,但其操作方式不一样.用百分比值来居中一幅背景图像,也很简单: body { background-image;url(beijing.gif); background-repe ...

  9. 用CSS边框图像让你的网站更漂亮

    不久之前,添加一些装饰性元素,例如给网页中的图片添加花哨的边,以及耐心调整CSS文件才能使你的网页看起来不错.然而现在CSS已经做出了改变,用复杂的边框装饰你的网站只需几行代码.这篇文章将告诉你如何做 ...

随机推荐

  1. BZOJ4998星球联盟——LCT+并查集(LCT动态维护边双连通分量)

    题目描述 在遥远的S星系中一共有N个星球,编号为1…N.其中的一些星球决定组成联盟,以方便相互间的交流.但是,组成 联盟的首要条件就是交通条件.初始时,在这N个星球间有M条太空隧道.每条太空隧道连接两 ...

  2. POJ1177（扫描线求周长并）

    题意:..求周长并... 解析:参考求面积并 图借鉴自:https://www.cnblogs.com/shuaiwhu/archive/2012/04/22/2464876.html 自下而上扫描 ...

  3. ACM-ICPC 2018 焦作赛区网络预赛 E Jiu Yuan Wants to Eat (树链剖分+线段树）

    题目链接:https://nanti.jisuanke.com/t/31714 题意:给你一棵树,初始全为0,有四种操作: 1.u-v乘x    2.u-v加x   3. u-v取反  4.询问u-v ...

  4. Linux开机自动挂载存储的两种方式

    登录服务器,给查看了下,发现确实是没有自动加载,df -h只能显示本地硬盘的分区,fdisk -l 还是能看到存储空间,这说明这个服务器连接存储是木有问题的. 输入history | grep mou ...

  5. Android 设置Activity样式 透明度

    一.设置Activity透明度有几种方法:1>.在清单文件中配置Activity时声明android:theme="@android:style/Theme.Translucent&q ...

  6. 洛谷 P2596 [ZJOI2006]书架 解题报告

    P2596 [ZJOI2006]书架 题目描述 小T有一个很大的书柜.这个书柜的构造有些独特,即书柜里的书是从上至下堆放成一列.她用1到n的正整数给每本书都编了号. 小T在看书的时候,每次取出一本书, ...

  7. 获取泛型的class 反射

    最近在使用Google的Gson包进行Json和Java对象之间的转化,对于包含泛型的类的序列化和反序列化Gson也提供了很好的支持,感觉有点意思,就花时间研究了一下. 由于Java泛型的实现机制,使 ...

  8. HDU 1029 Ignatius and the Princess IV / HYSBZ（BZOJ） 2456 mode（思维题，~~排序?~~）

    HDU 1029 Ignatius and the Princess IV (思维题,排序?) Description "OK, you are not too bad, em... But ...

  9. SQL语句中 int 溢出 + Asp语句中 Long 溢出

    晚上5点多,同事在QQ告诉我,一个用户向他反应,在他登录的时候显示错误信息,我们在管理平台查看该用户的基本信息时,也显示错误信息. 经过初步分析,原来是在执行 SQL语句的时候发生Int溢出: sql ...

  10. poj3070_斐波那契数列(Fibonacci)

    用矩阵求斐波那契数列,快速幂log(n),只用求最后4位(加和乘的运算中前面的位数无用) #include <stdio.h> #include <stdlib.h> int ...