Question

我无法将动画文字div置于中心位置。当我调整窗口大小时，它会朝向顶部，而不是停留在中间。此外，我想在屏幕的1/3处使用它，但我尝试使用网格，但它没有做太多。

<!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>

Answer 1

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;

以div为中心的Bootstrap

1 个答案: