老师,请问图片和单词相对文字的居中代码对吗?(4-3编程练习)

老师,请问图片和单词相对文字的居中代码对吗?(4-3编程练习)

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>文本样式</title>

        <style type="text/css">

           /*写出CSS样式*/

           div{text-align:center;

                line-height:5em;

                background:#eee;

                font-size:2em;

                height:5em;

           }

           img{vertical-align:-6px;}

           .ys{font-size:2em;}

           .yw{vertical-align:16px;

                color:red;

                text-decoration:underline;    

           }

        </style>

    </head>

    <body>

          <!--写出html代码-->

          <div>

                <img src="http://img1.sycdn.imooc.com/climg//59c21bae000157fa01000059.jpg" alt=""/>

                <span class="ys">CSS层叠样式表</span>

                

                <span class="yw">(Cascading Style Sheets)</span>

          </div>

    </body>

</html>


正在回答

登陆购买课程后可参与讨论,去登陆

3回答

同学你好,建议给文字和图片都设置vertical-align:middle,参考下图:

http://img1.sycdn.imooc.com//climg/5c32ef960001afb808520647.jpg

这样效果会好一点,自己测试一下,祝学习愉快,望采纳!

  • 慕尼黑5122342 提问者 #1
    再请问下,图片,行高,文字,英文单词的具体像素是多少?
    2019-01-08 10:44:21
bbbboom 2019-01-08 16:13:57

元素设置vertical-align: middle是相对于父容器的中线显示的,你可以看看这篇文章:

https://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

看完你就理解了。

还有你问的这个,字体大小16像素是怎么计算的,这是浏览器计算出来的,没有一个依据。 

山河远阔ZZ 2019-01-08 12:01:39

浏览器默认的字体大小是16px,所以1em =16px,当字体大小事默认字体大小的2倍时,2*16 = 32px,可以用2em来表示。当行高是浏览器默认字体大小的5倍时,5*16 = 80px,可以用5em来表示。

  • 提问者 慕尼黑5122342 #1
    字体大小是16px的意思是:字体的横向像素乘以纵向像素得到16px是吗?
    2019-01-08 14:40:32
  • 提问者 慕尼黑5122342 #2
    中线middle是相对于谁的中线,都设置middle垂直方向位置好像移动了,无法垂直居中?
    2019-01-08 15:11:53
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师