Question

我是Bootstrap的新手，所以我也不知道。

基本上，在列内，我希望内部的内容更多地向中心移动（垂直和水平）。

我希望能得到一些帮助。

HTML

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- IE Edge Meta Tag -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <title>title</title>
    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Open+Sans:300' />
    <link rel="stylesheet" href="css/styles.css">

</head>
<body>
    <!-- page content -->
    <div class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                <img class="navbar-brand" src="img/Dhub%20Logo-01.png">
                <button type="button" class="navbar-toggle" data-
toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div class="collapsed navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Help</a></li>
                    <li><a href="#">Document Library</a></li>
                    <li><a href="#">Contact us</a></li>
                    <li><a href="#">Register your account</a></li>
                    <li><a class="login-colour" href="#">Login</a></li>
                </ul>
            </div>
        </div>
        <div id="first-background">
           <!-- <img src="img/shutterstock_170790012.jpg" /> -->

                <div class="container">
                        <div class="row">
                            <div class="col-md-6">
                                <h1 class="big-header">Concentrate on the important things in life</h1>
                                <p class="light-text bold">You can now pay your ground rent using a debit card from our Tenant Portal without incurring any processing fees</p>
                                <p class="light-text">From the portal you can also get access to all your legal documentation and even your lease, completely free of charge.</p>
                                <div class="button button1">Register your account</div>
                                <div class="button button2">See how it works</div>
                            </div>
                        </div>    
                </div>

        </div>
        <div id="second-background">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <h1 class="big-header">Finger tip control of your online account</h1>
                        <p class="dark-text bold">Our secure online payments system by Sagepay saves you time
                        and effort. You can settle ground rent payments directly and view your live account
                        details</p>
                        <p class="dark-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</p>
                        <div class="button button1">Register your account</div>
                        <div class="button button3">See how it works</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

CSS

 .navbar {
    border-radius: 0px;
    /*For some reason, CDN had a border-radius of 4px, so I changed it back to 0px */
    background-color: rgb(0, 0, 0);
}

.navbar-inverse .navbar-nav > li > a.login-colour {
    color: rgb(134, 193, 3);
}

#first-background {
    background-image: url('../img/shutterstock_170790012.jpg');
    background-size: 100% ;
    -o-background-size: 100%;
    -webkit-background-size: 100%;
    -khtml-background-size: 100%;
    -moz-background-size: 100%; 
    height: 1000px;
    background-repeat: no-repeat;
}

#second-background {
    background-color: rgb(255, 255, 255);
    background-size: 100% ;
    -o-background-size: 100%;
    -webkit-background-size: 100%;
    -khtml-background-size: 100%;
    -moz-background-size: 100%; 
    height: 1000px;
    background-repeat: no-repeat;
}

.button {
    display: inline-block;
    border-radius: 20px;
    height: 35px;
    text-align: center;
    padding-top: 4px;

}

.button1 {
   border-style: solid;
    border-color: rgb(134, 193, 3);
    color: rgb(255, 255, 255);
    background-color: rgb(134, 193, 3); 
    width: 17em;
}

.button2 {
   border-style: solid;
    border-color: white;
    color: rgb(255, 255, 255);
    width: 12em;

}

.button3 {
   border-style: solid;
    border-color: rgb(77, 77, 77);
    color: rgb(51, 51, 51);
    width: 12em;
    border-width: 2px;
}

.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}

#first-background .big-header {
    color: rgb(134, 193, 3);
}

#second-background .big-header {
    color: rgb(51, 51, 51);
}

.light-text {
    color: rgb(255, 255, 255);
}

.dark-text {
    color: rgb(51, 51, 51);
}

.bold {
    font-weight: 600;
}

感谢。

Answer 1

如果你想在垂直方向上向中心移动某些东西，你可以尝试在边距中添加更多空间例如保证金：5px

在堆栈溢出文本框上测试它确实将文本框置于周围的div

中

希望这有帮助！

Answer 2

尝试使用此课程margin: 0 auto或UInt32Array

在div中引导内容的引导程序

2 个答案: