HTML设置文字和图片居中

1.当图片和文字在同一行的情况

<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            div{
                width: 300px;
                height: 60px;
                border:1px solid red ;
                /*line-height: 60px;*/
            }   
        style>
    head>
    <body>
        <div>
            <img src="img03/verycode.gif"/>
            <span>啊啊啊啊啊啊span>
        div>
    body>
html>

效果如图所示:
文字是默认在图片的右下角对齐(就算使用对div设置居中也是这样,只能设置图片最底下哪行对div居中)
HTML设置文字和图片居中_第1张图片

2.使用vertical-align:middle属性使图片和文字居中,同使用line-height等于div的height值,使文字垂直居中。

            div{
                width: 300px;
                height: 60px;
                border:1px solid red ;
                line-height: 60px;
            }   
            div img{
                vertical-align: middle;
            }

效果如图所示:文字和图片都居中
HTML设置文字和图片居中_第2张图片

你可能感兴趣的:(个人HTML笔记)