使用css将图像居中

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

 

posted @ 2018-08-11 16:43  梦人亭  阅读(628)  评论(0)  编辑  收藏  举报