如何让背景图片中的文字居中偏下显示

如何让背景图片中的文字居中偏下显示

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>背景</title>

    <style>

    div{width:300px;height:300px;background-image:url(http://img1.sycdn.imooc.com/climg//58dc9d360001d65806500650.jpg);font-weight:bold;text-align:center;display:table;}

    p{vertical-align:bottom;display:table-cell;}

     /*此处写代码*/

    </style>

</head>

<body>

    <div>

        <p>《长歌行》

        <br>

        <br>青青园中葵,朝露待日晞。

        <br>阳春布德泽,万物生光辉。

        <br>常恐秋节至,焜黄华叶衰。

        <br>百川东到海,何时复西归。

        <br>少壮不努力,老大徒伤悲。

        <br>

        </p>

    </div>

</body>

</html>

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

正在回答

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

5回答

可以用padding-bottom顶开

  • 慕仙1056934 提问者 #1
    vertical align为什么行不通呢
    2018-04-13 13:09:22
  • 堕落菌 回复 提问者 慕仙1056934 #2
    bottom是底部对齐,middle是垂直居中...
    2018-04-13 13:12:27
  • 慕仙1056934 提问者 #3
    base bottom基线对齐也不行呀
    2018-04-13 13:14:49
慕九州4284293 2018-04-26 14:43:30

可以先使用text-align进行文本居中,然后使用padding属性调整文本的外边框进行一个移位。

王刘永 2018-04-23 16:11:50

vertical-align只对行内元素起作用,此处文字置于div块级元素内。你可以将文字置于span标签内然后运用vertical-align即可。

htmLouis 2018-04-17 00:23:28
  p{vertical-align:bottom;display:table-cell;}
  这里vertical-align:bottom;没有居中偏下的效果了。
  用padding来填充的效果较好。


Miss路 2018-04-13 15:22:39

vertical-align 属性设置元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

这里不太适合用vertical-align 属性,用padding或者margin填充就可以了。

祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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