居中方面的问题

首页课程实战体系课手记专栏慕课教程

居中方面的问题

来源：4-1 删除的标签

早知今日何必当初

2019-04-14 12:34:55

html5删除了center，老师能把垂直剧中的方式都告诉我下面，对这方面的掌握还是差了点。

如文字垂直剧中，一行浮动段落垂直剧中，图片垂直剧中，浮动图片垂直居中。

写回答

1回答

樱桃小胖子

2019-04-14

已采纳

1、图片的垂直居中方法

<style>
    .box {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        /* 针对IE的Hack */
        *display: block;
        *font-size: 175px;
        *font-family: Arial;
        width: 200px;
        height: 200px;
        border: 1px solid #eee;
    }
    .box img {
        /*设置图片垂直居中*/
        vertical-align: middle;
    }
    </style>

2、单行文字垂直居中使用lin-height

3、多行文字垂直居中

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .middle-box {
        display: table;
        width:500px;
        height: 300px;
        border:1px solid red;
    }

    .middle-inner {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    </style>
</head>

<body>
    <div class="middle-box">
        <div class="middle-inner">
            <p><span class="suc-tip">慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网</span><br /><span class="suc-link">快捷入口：<a href="http://www.imooc.com">http://www.imooc.com</a></span></p>
            <p style="display:none;"><span class="suc-tip">慕课网慕课网慕课网</span></p>
        </div>
    </div>
</body>

</html>

希望可以帮到你！

0 学习 · 40143 问题

查看课程

相似问题

margin:0 auto 与 text-align的区别是什么？

回答 5

请问怎么让section里面的内容水平居中，label 和input相对于section居中

回答 1

问一个软件使用方面的问题

回答 1

视频中的讲解有些问题

回答 3

老师，为什么我的代码一模一样，结果却有点诡异

回答 4

打开慕课网App查看更多内容