使用CSS将图像对齐

时间：2024-09-20 11:05:32

相对于<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>

相关文章