图片和多行文本垂直居中

最新推荐文章于 2022-04-13 20:26:47 发布

木森林哥哥

最新推荐文章于 2022-04-13 20:26:47 发布

阅读量151

点赞数

分类专栏：代码文章标签： html css3 css

本文链接：https://blog.csdn.net/weixin_47021982/article/details/111587750

版权

代码专栏收录该内容

32 篇文章 1 订阅

订阅专栏

图片和多行文本垂直居中

代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="keywords" content="zidingyi">
        <meta name="keywords" content="zidingyi">
        <meta charset="UTF-8">
        <title>hunsha 2</title>
        <style>
            .sha {
                width: 520px;
                border: 1px solid red;
                /* line-height: 520px; */
            }
            h1 {
                text-align: center;
                font-size: 24px;
                /* border: 1px solid green; */
            }
            .sha .main {
                font-size: 0;
                border: 1px solid blue;
            }
            .sha .main img {
                width: 218px;
                vertical-align: middle;
                font-size: 0;
                border: 1px solid green;
            }
            .sha .main .content {
                display: inline-block;
                width: 290px;
                /* height: 400px; */
                font-size: 12px;
                border: 1px solid yellow;
                vertical-align: middle;
                text-indent: 2em;
                line-height: normal;
            }
           
        </style>
    </head>
    <body>
        <div class="sha">
            <h1>婚 纱（hūn shā）</h1>
            <div class="main">
                <img src="./img/hunsha.jpg" alt="">
                <div class="content">
                    <div>每一个女人医生最钟爱的服装就是————婚纱，它象征爱情，见证了爱情的永恒。</div>
                    <div>当有天红颜老去，回顾岁月的流逝，一件合适自己的结婚的婚纱能够让所有的人记得那年的青春。每一个女人一生最钟爱的服装就是——婚纱，它象征了爱情，见证了爱情的永恒.</div>
                    <div>婚纱是一个女人一生的分水岭。穿上婚纱的那—刻就代表着一个女人少女时代的终结，您不再是小女孩而是一个新角色的开始。而穿上婚纱的女人对爱人、对将来的孩子、对整个家庭都有了责任。</div>    
                </div>
            </div>
        </div>
    </body>
</html>

效果：

在这里插入图片描述

代码2：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        #ad {
            width: 700px;
            border: 1px solid rgb(231, 234, 237);
        }

        #ad h1 {
            text-align: center;
        }

        /*下面的具体内容*/
        #ad-content {
            height: 460px;
            line-height: 460px;
            /* border: 1px solid green; */
            font-size:0;
            text-align: center;
        }

        #ad .ad-pho {
            display: inline-block;
            width: 300px;
            height: 460px;
            /* border: 1px solid pink; */
            text-align: center;
            /* background-color:green; */
        }
        #ad .ad-pho img{
            vertical-align: middle;
            width: 300px;
        }

        #ad .ad-detail{
            display:inline-block;
            width:390px;
            /* border:1px solid green; */
            font-size:16px;
            line-height: normal;
            vertical-align: middle;
            text-align: left;
            padding-left: 10px;
        }
        #ad .ad-detail p{
            font-size:14px;
            color:#333;
            text-indent: 2em;
            /* border: 1px solid red; */
        }
    </style>
</head>

<body>
    <div id="ad">
        <h1>幂 幂 蜜 语</h1>
        <div id="ad-content">
            <div class="ad-pho">
                <img src="./exercise/img/杨幂.png" />
            </div>
            <div class="ad-detail">
                <p>每一个女人一生最钟爱的服装就是——婚纱，它象征爱情，见证了爱情的永恒。</p>

                <p>当有天红颜老去，回顾岁月的流逝，一件合适自己的结婚的婚纱能够让所有的人记得那年的青春。每一个女人一生最钟爱的服装就是——婚纱，它象征了爱情，见证了爱情的永恒。</p>

                <p>婚纱是一个女人一生的分水岭。穿上婚纱的那一刻就代表着一个女人少女时代的终结，您不再是小女孩而是一个新角色的开始。而穿上婚纱的女人对爱人、对将来的孩子、对整个家庭都有了责任。</p>
            </div>
        </div>
    </div>
</body>

</html>

显示：
在这里插入图片描述

木森林哥哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片和多行文本垂直居中

图片和多行文本垂直居中代码：<!DOCTYPE html><html lang="en"> <head> <meta name="keywords" content="zidingyi"> <meta name="keywords" content="zidingyi"> <meta charset="UTF-8"> <title>hunsha
复制链接

扫一扫