以div为中心的引导程序

-1

我在将动画文本置于中心时遇到问题div。当我调整窗口大小时，它将朝向顶部而不是停留在中间。另外我希望它在屏幕的1/3上，但是我用网格尝试了它，但它并没有做太多。以div为中心的引导程序

<!DOCTYPE html> 
<html lang="en"> 

<head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title>Sam</title> 

    <!-- Bootstrap Core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <!-- Custom CSS --> 
    <style> 
     #body1 { 
      font: normal 40px/50px Arial, sans-serif; 
      color: #999; 
     } 


     p { 
      height: 50px; 
      float: left; 
      margin-right: 0.3em; 
     } 

     b { 
      float: left; 
      overflow: hidden; 
      position: relative; 
      height: 50px; 
     } 

     span1 { 
      display: inline-block; 
      color: #e74c3c; 
      position: relative; 
      white-space: nowrap; 
      top: 0; 
      left: 0; 
      -webkit-animation: move 5s; 
      -webkit-animation-iteration-count: infinite; 
      -webkit-animation-delay: 1s; 
     } 

     @keyframes move { 
      0% { 
       top: 0px; 
      } 
      20% { 
       top: -50px; 
      } 
      40% { 
       top: -100px; 
      } 
      60% { 
       top: -150px; 
      } 
      80% { 
       top: -200px; 
      } 
     } 

     #elem { 
      background: url('./drawable/headerBg.jpg') center center no-repeat; 
      background-size: 100px 150px; 
     } 

     a, 
     a:focus, 
     a:hover { 
      color: #fff; 
     } 

     .btn-default, 
     .btn-default:hover, 
     .btn-default:focus { 
      color: #333; 
      text-shadow: none; 
      /* Prevent inheritence from `body` */ 
      background-color: #fff; 
      border: 1px solid #fff; 
     } 


     html, 
     body { 
      /*css for full size background image*/ 
      background: url(https://drscdn.500px.org/photo/191618715/q%3D80_m%3D2000/b08d920f4f2d248a837e236e1f5e55af) no-repeat center center fixed; 
      -webkit-background-size: cover; 
      -moz-background-size: cover; 
      -o-background-size: cover; 
      background-size: cover; 

      height: 100%; 
      background-color: #060; 
      color: #fff; 
      text-align: center; 
      text-shadow: 0 1px 3px rgba(0, 0, 0, .5); 
     } 
     /* Extra markup and styles for table-esque vertical and horizontal centering */ 

     .site-wrapper { 
      display: table; 
      width: 100%; 
      height: 100%; 
      /* For at least Firefox */ 
      min-height: 100%; 
      -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, .5); 
      box-shadow: inset 0 0 100px rgba(0, 0, 0, .5); 
     } 

     .site-wrapper-inner { 
      display: table-cell; 
      vertical-align: top; 
     } 

     .cover-container { 
      margin-right: auto; 
      margin-left: auto; 
     } 
     /* Padding for spacing */ 

     .inner { 
      padding: 30px; 
     } 
     /* 
* Header 
*/ 

     .masthead-brand { 
      margin-top: 10px; 
      margin-bottom: 10px; 
     } 

     .masthead-nav>li { 
      display: inline-block; 
     } 

     .masthead-nav>li+li { 
      margin-left: 20px; 
     } 

     .masthead-nav>li>a { 
      padding-right: 0; 
      padding-left: 0; 
      font-size: 16px; 
      font-weight: bold; 
      color: #fff; 
      /* IE8 proofing */ 
      color: rgba(255, 255, 255, .95); 
      border-bottom: 2px solid transparent; 
     } 

     .masthead-nav>li>a:hover, 
     .masthead-nav>li>a:focus { 
      background-color: transparent; 
      border-bottom-color: #a9a9a9; 
      border-bottom-color: rgba(255, 255, 255, .25); 
     } 

     .masthead-nav>.active>a, 
     .masthead-nav>.active>a:hover, 
     .masthead-nav>.active>a:focus { 
      color: #fff; 
      border-bottom-color: #fff; 
     } 

     @media (min-width: 768px) { 
      .masthead-brand { 
       float: left; 
      } 
      .masthead-nav { 
       float: right; 
      } 
     } 
     /* 
* Cover 
*/ 

     .cover { 
      padding: 0 20px; 
     } 

     .cover .btn-lg { 
      padding: 10px 20px; 
      font-weight: bold; 
     } 
     /* 
* Footer 
*/ 

     .mastfoot { 
      color: #999; 
      /* IE8 proofing */ 
      color: rgba(255, 255, 255, .5); 
     } 
     /* 
* Affix and center 
*/ 

     @media (min-width: 768px) { 
      /* Pull out the header and footer */ 
      .masthead { 
       position: fixed; 
       top: 0; 
      } 
      .mastfoot { 
       position: fixed; 
       bottom: 0; 
      } 
      /* Start the vertical centering */ 
      .site-wrapper-inner { 
       vertical-align: middle; 
      } 
      /* Handle the widths */ 
      .masthead, 
      .mastfoot, 
      .cover-container { 
       width: 100%; 
       /* Must be percentage or pixels for horizontal alignment */ 
      } 
     } 

     @media (min-width: 992px) { 
      .masthead, 
      .mastfoot, 
      .cover-container { 
       width: 700px; 
      } 
     } 
    </style> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 

</head> 

<body> 

    <!-- Navigation --> 
    <div class="site-wrapper"> 
     <div class="site-wrapper-inner"> 
      <div class="cover-container"> 
       <div class="masthead clearfix"> 
        <div class="inner"> 
         <h3 class="masthead-brand">Cover</h3> 

         <ul class="nav masthead-nav"> 
          <li class="active"> 
           <a href="#" target="_blank">Home</a> 
          </li> 

          <li> 
           <a href="#">About</a> 
          </li> 

          <li> 
           <a href="#">Contact</a> 
          </li> 
         </ul> 
        </div> 
       </div> 


       <!-- Page Content --> 
       <div class="container"> 

        <div class="row"> 
         <div class="col-lg-12 text-center"> 
          <div id="body1"> 
           <p>I'm a</p> 
           <b> 
           <span1> 
           web pls<br /> 
           keyboard warrior<br /> 
           student<br /> 
           sdfsdf developer<br /> 
           df 
           </span1> 
           </b> 
          </div> 
         </div> 

        </div> 
       </div> 
       <!-- /.row --> 

      </div> 

      <!-- Page Content --> 

      <!-- /.row --> 


      <!-- /.container --> 

      <!-- jQuery Version 1.11.1 --> 
      <script src="js/jquery.js"></script> 

      <!-- Bootstrap Core JavaScript --> 
      <script src="js/bootstrap.min.js"></script> 

</body> 

</html>

来源

2017-03-31 Sam Vruggink

33.33334％列：

<div class="col-lg-4 col-sm-12"> 
    col 1 
</div> 
<div class="col-lg-4 col-sm-12"> 
    col 2 
</div> 
<div class="col-lg-4 col-sm-12"> 
    col 3 
</div>

为中心的DIV尝试：

text-align:center;

或

display:block; 
margin: 0 auto;

来源

2017-03-31 20:03:24

谢谢。但是，当调整窗口大小时，我的动画文本会自动向上移动，而不是停留在原地。你也许知道为什么？ –

玩弄span1，p和b ..你有很多风格在那里。 float：left，display：inline-block，定位...需要清理它。 –

以div为中心的引导程序

回答

相关问题