3-12编程练习

<!DOCTYPE html>
<html>
    <head>
   <meta charset="UTF-8">
   <title>vertical-align</title>
   <style type="text/css">
    *{padding:0px;margin: 0px;}
   
    .warp1{    
              height:80px;
              width: 100%;
              background-color: #14191e;         
              display: table;
           /*在此补充代码*/
             }

     .warp1 h1{ color:#fff;
                font-size:24px;
                text-align:center;
                vertical-align: middle;
                display:table-cell;
       /*在此补充代码*/ }
     .warp2{
              height:400px;
              width: 100%;
              border:1px  #14191e solid;
              display: table;
              text-align:center;
              vertical-align: middle;
              /*在此补充代码*/                    
             }

     .content{    
              /*在此补充代码*/
              line-height: 1.5em;
              font-size: 14px;
              width:500px;
              text-align:center;
              vertical-align: middle;
              margin:0 auto;
              }

     .content  p{ width:500px;
                  font-family: "微软雅黑";
                  margin:0 auto;   
        /*在此补充代码*/}   
   </style>
</head>
<body>
<div class="warp1">
          <h1>欢迎来到慕课网</h1>      
</div>
  <div class="warp2">
        <div class="content">
           <p>慕课网，只学有用的！</p>
           <p>慕课网（IMOOC）是IT技能学习平台。慕课网(IMOOC)提供了丰富的移动端开发、php开发、web前端、android开发以及html5等视频教程资源公开课。并且富有交互性及趣味性，你还可以和朋友一起编程。</p>
        </div>
</div>    

</body>
</html>

慕盖茨9513023 2020-08-25

源自：CSS文本样式 3-12 编程练习

收起

3回答

好帮手慕言 2020-09-01 09:53:51

同学你好，解答如下：
1、理解的是对的，不过内层元素还需要设置vertical-align: middle;才能实现垂直居中。

2、内容水平居中可以设置text-align:center样式，多行也可以实现居中，例如：

效果：

3、设置宽度，配合margin是让盒子整体居中显示，例如：

效果（外层盒子水平居中是设置了宽度和margin，内容水平居中是因为设置了text-align: center;）：

祝学习愉快~

收起回答

好帮手慕言 2020-08-30 10:02:18

同学你好，在任务中，都有提示的，如下：

老师已经按照同学提供的代码进行了修改，同学可以根据代码再捋一下思路，如果哪里不明白，再针对不明白的知识点提问，老师帮助解答，这样同学才能有进步呦，祝学习愉快~

收起回答

提问者慕盖茨9513023 #1

老师，您好，我想问一下：1.是不是实现垂直居中的话，就是外层元素使用 display:table;内层元素使用：display:table-cell呢。 2.水平居中是text-align:center吗？这只是针对单行的文字内容？ 3.如果是多行的段落内容，就要使用盒子模型了吗？先设置元素的宽度，然后设置margin:0 auto;吗？不知道我理解的这三点对不对。

2020-08-31 22:17:04