老师，这个img怎么实现在div里面居中，我设置了行高也没用啊，就动了一点

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*此处写代码*/
        body {
            margin: 0;
            padding: 0;
            color: #fff;
            text-align: center;
        }
 
        /* .one,.two{width: 1000px;padding: 0;} */
        .one {
            height: 500px;
            width: 1000px;
            margin: 0 auto;
            background: #ADD8E6;
        }
        .one .left{
            float: left;
            width: 50%;
            height: 100%;
            line-height: 500px;
            vertical-align: middle;
            margin: auto;
        }
        .one .right{
            float: right;
            width: 50%;
            height: 100%;
            line-height: 500px;
            vertical-align: middle;
            margin: auto;
        }
    </style>
</head>
 
<body>
    <!-- 此处写代码 -->
    <div class="one">
        <div class="left"><img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg" alt=""></div>
        <div class="right"><img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg" alt=""></div>
    </div>
    <div class="two">
        <img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg" alt="">
        <img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg" alt="">
        <img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg" alt="">
    </div>
</body>
 
</html>

img算是行内元素吗？

和文本是一样的吗？那我设置咋没效果啊

慕桂英6225613 2019-10-22

源自：CSS网页布局基础 2-14 编程练习

0

收起

4回答

好帮手慕码回答被采纳获得+3积分 2019-10-26 14:33:13

同学你好！
这是因为内联标签、内联块标签的特性（也称为文字特性），存在间隙。其中解决方法之一，就是给父级设置： font-size: 0;

可以具体看下图片：

这个图片本身的高度是60px:

这多出来的4px就是图片存在的间隙了，给父级设置 font-size: 0;

就清除了这个间隙：

如果帮助到了你，欢迎采纳，祝学习愉快~

好帮手慕糖 2019-10-26 14:21:24

同学你好，因为图片本身是有间距的，给父级设置font-size为0，可以去掉图片的间距哦。

希望能帮助到你，祝学习愉快！

好帮手慕粉 2019-10-23 11:38:50

同学你好，老师先给你举个例子（用vertical-align），你参考一下看可以不可以实现：

因为图片是内联元素，底部存在默认间隙，如果不清除默认间隙的话，是不能实现完全垂直居中的，所以我们给div设置了font-size:0，这样就解决了。

如果还不能实现的话，建议同学将自己的代码粘出来，这样老师才能帮同学分析问题出在了哪。可以再新建一个问答进行提问，那样效率比较高哦。

希望我的回答能够帮助到你，望采纳，祝学习愉快！

提问者慕桂英6225613 #1

谢谢老师，我大概明白了，我原来把vertical-align:middle;用来修饰div了，放在img里就好了，不过还有个问题，font-size为什么要置为0啊

2019-10-26 13:12:08

好帮手慕粉 2019-10-23 10:26:03

同学你好，首先img是行内元素哦，文本也是行内元素，但是行高等于高度只能实现单行文本的垂直居中，图片是实现不了的哦。同学可以使用margin和padding值，或者vertical-align: middle来实现图片的垂直居中哦。如果有疑问，可以新建一个问答继续提问哦。

希望我的回答能够帮助到你，望采纳，祝学习愉快！

提问者慕桂英6225613 #1

我试过vetical-align:middle;不知道根据什么居中的，反正最后没有垂直居中

2019-10-23 10:28:01

相似问题

老师，我记得之前将after清除伪类content里面设置的是。这里设置的是空格啊？效果一样吧？

老师我有几个问题

为什么无法实现整体居中

设置高度=6:4 我设置为600px:400px l浏览器出现滚动条，伪元素怎么绑定在每个子div中

如何设置中间浮动的盒子居中呢？

登录后可查看更多问答，登录/注册

1.前端零基础入门

参与学习人
提交作业 8403 份
解答问题 40143 个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

本课精华内容

问答作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号