4-3练习

4-3练习

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>基础表单</title>

<style type="text/css">

div{background-color:#eee;font-size:2em;line-height:5em;text-align:center;}

img{vertical-align:middle;}

.one{font-size:2em;vertical-align:middle}

.two{color:red;text-decoration:underline}

    </style>

</head>

<body>

<div>

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

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

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

</div>

</body>

</html>

老师请问一下,题外话:如果我想拉高灰色背景颜色,但图片和文本仍然是水平垂直居中的,只是将上下灰色背景拉高,应该添加什么?我曾经自己在style里面的div添加height:200px,就是div{background-color:#eee;font-size:2em;line-height:5em;text-align:center;height:200px;},为何只是拉高了下方,上方还是没升高?

正在回答 回答被采纳积分+1

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

2回答
怎么都被占用了呢 2017-11-09 09:51:40

我上边说的也是有些不严谨。vertical-align属性,它只对(X)HTML元素中拥有valign特性的元素才生效。所以我们一般将该属性和display:table-cell配合使用设置多行文本垂直居中,单行文本的垂直居中使用line-height更合适、方便。line-height的值,要等于设置的高度值。

怎么都被占用了呢 2017-11-07 17:09:42

图片可以直接使用vertical-align属性进行对齐,但是对于文本,我们通常使用line-height控制,如下:

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

  • 你不是说vertical-align属性对对文本不起作用吗?那图中类选择器.one中为什么要有vertical-align属性,类选择.div中添加line-height:200px属性后文本不是已经可以垂直居中了吗? 求解
    2017-11-08 23:52:58
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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