zoukankan      html  css  js  c++  java
  • 使用CSS将图像对齐

    相对于<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 {
    		 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>
    
  • 相关阅读:
    【go语言】Windows下go语言beego框架安装
    分页
    MongoDB用户与权限管理
    MongoDB安装在Centos7下安装
    centos7安装mysql5.7.33 tar包方式
    文件路径分隔符
    python之批量打印网页为pdf文件
    Python驱动SAP GUI完成自动化(五)
    动态内存与智能指针
    关联容器
  • 原文地址:https://www.cnblogs.com/q2546/p/9460201.html
Copyright © 2011-2022 走看看