图文结合和三种居中显示的方式

strawberry tree

已于 2022-04-15 19:06:48 修改

阅读量290

点赞数

分类专栏：笔记文章标签： html css

于 2022-04-15 12:09:52 首次发布

本文链接：https://blog.csdn.net/water7_melon7/article/details/124191597

版权

笔记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

样例一：上下结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图文组合1</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: cyan;
        }
        div img{
            width: 100px;
            background-color: gold;
        }
        div p{
            width: 200px;
            height: 40px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
       <img src="D:\001-HTML\作业\csdn.png" alt="">
       <p>CSDN欢迎你的到来</p>
    </div>
</body>
</html>

效果图：

实现图片和文本居中的效果：

更改css样式中的img标签，增加 margin-left:50px;
具体代码如下：
div img{
        width: 100px;
        background-color: gold;
        margin-left: 50px;
        }
更改div p标签，增加line-height:40px;text-align:center;实现文本水平和垂直的居中
具体代码如下：
div p{
      width: 200px;
      height: 40px;
      background-color: pink;
      line-height: 40px;
      text-align: center;
        }

更改完的效果图如下：

样例二：水平结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图文组合1</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        div{
            width: 300px;
            height: 70px;
            background-color: cyan;
        }
        div img{
            width: 100px;
            background-color: gold;
            float: left;
        }
        div p{
            width: 170px;
            height: 40px;
            background-color: pink;
            line-height: 40px;
            float: left;
        }
    </style>
</head>
<body>
    <div>
       <img src="D:\001-HTML\作业\csdn.png" alt="">
       <p>CSDN欢迎你的到来</p>
    </div>
</body>
</html>

效果图：

结论:让img标签和p标签都进行左浮动，图片和文字就会变成水平样式

三种居中方式：

文本垂直居中：line-height:height;(line-height=height)
文本内容居中：text-align:center;
水平居中：margin:0 auto;

strawberry tree

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图文结合和三种居中显示的方式

样例一：上下结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
复制链接

扫一扫