将CSS对齐到中间时出现问题

时间:2019-05-28 04:34:20

标签: html css

我在尝试将错误文本在屏幕中间向下对齐时遇到了一些问题,填充有效,但是两个<h1>开始分开很大,我希望它是相同的与现在一样,但位于屏幕的中央。所有表示<div>的{​​{1}}都用于在桌面模式下隐藏移动导航栏,该导航栏可以正常工作。

display: none;
.nav2 {
   display: none;  
   }
   
   .nav-header{
   display: none;
   }
   
   .nav-title{
   display: none;
   }
   
   .nav-btn{
   display: none;
   }
   
   .nav-check{
   display: none;
   }
   
   #nav-check{
   display: none;
   }
   
   .nav-links{
   display: none;
   }
   
   .nav-header{
   display: none;
   }
   
   .nav2 a {
   display: none;  
   }
   
   .nav-header a{
   display: none;
   }
   
   .nav-title a{
   display: none;
   }
   
   .nav-btn a {
   display: none;
   }
   
   .nav-check a{
   display: none;
   }
   
   #nav-check a{
   display: none;
   }
   
   .nav-links a{
   display: none;
   }
   
   .nav-header a{
   display: none;
   }
   
   body > #header{position:fixed;}
   #header {
       width: 100%;
       position: fixed;
       z-index:9000;
       color: #000000;
       WHITE BG // color/ #8c8c8c;
       font-size: 25px;
       text-align: left;
       font-family: 'Pacifico', cursive;
       left: 15px;
       top: 25px;
       transition: all 0.5s linear;
       transition: height 0.5s ease;
       -webkit-transition: height 0.5s ease;
       -moz-transition: height 0.5s ease;
       -o-transition: height 0.5s ease;
       -ms-transition: height 0.5s ease;
       transition: background-color 0.5s ease;
       -webkit-transition: background-color 0.5s ease;
       -moz-transition: background-color 0.5s ease;
       -o-transition: background-color 0.5s ease;
       -ms-transition: background-color 0.5s ease;
       transition: background-color 0.5s ease;
       -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
          -moz-animation: fadein 2s; /* Firefox < 16 */
           -ms-animation: fadein 2s; /* Internet Explorer */
            -o-animation: fadein 2s; /* Opera < 12.1 */
               animation: fadein 2s;
       
   }
   
   #navigation {
   width: 100%;
       position: fixed;
       z-index: 9000;
       text-decoration: none!important;
       list-style-type: none;
       color: #006CFF;
       font-family: 'Ubuntu', sans-serif;
       font-size: 15px;
       text-align: right;
       margin: 22px -20px;
       -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
          -moz-animation: fadein 2s; /* Firefox < 16 */
           -ms-animation: fadein 2s; /* Internet Explorer */
            -o-animation: fadein 2s; /* Opera < 12.1 */
               animation: fadein 2s;
   
      
   }



   .feedback {
text-align: center;
font-size: 22px;
color: #494949;

}

h1 {
text-align: center;
font-size: 50px;
font-weight: bolder;
color: #494949;

}

1 个答案:

答案 0 :(得分:0)

我希望你一切都好。以下是我在这种情况下建议的代码更改:

<i>

我已经创建了一个新的div,其类名为“ new”,并按照标准更改了第二个标签(将其更改为h2)。最重要的是,在CSS中添加了以下内容:

<div class="new">
 <h1>Looks like this page doesn't exist</h1>
 <h2 class="feedback">Please double-check you are entering the correct 
 information in your address bar.<br> This page may also have been moved, 
 deleted or a feature may not be available to you.</h1> 
</div>

我希望这会有所帮助。