Question

我正在复制this网站进行练习，但遇到了麻烦。需要将“嗨，我是奇瑞”这一部分移到网站的中心，问题是我不知道如何覆盖引导程序中的列，以免发生这种情况并将文本死点放在两列之间为了明确起见，我想像在Web链接中一样使用引导程序将文本放在中间。我的项目中有两个均分的列。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Chery Wix template</title>
    <style>
        .hero {
            padding-bottom: 230px;
            text-align: left;
            text-transform: capitalize;
        }

        .display-4 {
            margin-top: 350px;
            margin-left: 200px;
            font-weight: bold;
            text-transform: capitalize;
        }

        .info {
            margin-left: 200px;
            font-size: 25px;
            font-weight: 200px;
        }

        .btn {
            background-color: rgba(0, 0, 0, .0);
            margin-top: 50px;
            border: 2px solid black;
            border-radius: 30px;
            color: black;
            margin-left: 200px;
        }

        /*---------header-------------------*/

        header nav {
            float: right;
        }

        header ul {
            padding: 0;
            margin: 0;
        }

        header li {
            display: inline;
            float: right;
            margin-top: 30px;
        }

        header li a {
            color: black;
            font-size: 22px;
            padding: 0 10px 0 10px;
        }

        header li a:hover {
            text-decoration: none;
            color: black;
        }

        .tiny {
            font-size: 20px;


        }

        #branding {
            float: left;
            padding: 20px;
        }

        .line {
            line-height: .5;
        }

        /*-------section--------------------------*/

        .portrait {
            
        }

        .aboutme {
            margin-top: ;
        }

        .hi {
            text-transform: capitalize;
            font-size: 63px;
        }
    </style>

</head>

<body>

    <body>
        <header>
            <div class="container">

                <div id="branding">
                    <h1 class="line">Chery Jones <br><small class="tiny">Digital Media
                            Expert</small></h1>
                </div>
                <nav>
                    <ul>

                        <li class="current"><a href="#"> <i class="fab fa-youtube"></i> </a></li>
                        <li class="current"><a href="#"> <i class="fab fa-twitter"></i> </a></li>
                        <li class="current"><a href="#"> <i class="fab fa-facebook"></i> </a></li>
                        <li class="current"><a href="#"> HOME </a></li>
                    </ul>
                </nav>
            </div>
        </header>


        <div class="jumbotron text hero" style="background-image: url(images/pinkbuilding.png);background-repeat: no-repeat;backround-size:cover">
            <h1 class="display-4">free digital marketing <br>webinar</h1>
            <p class="info">unlock margeting secrets that work</p>

            <a class="btn btn-dark btn-lg" href="#" role="button">Reserve My Spot</a>
        </div>


        <div class="container">
            <div class="row">
                <div class="col-6"> <img src="images/beautiful-blur-casual-935756.jpg" style="width: 500px;height: auto" class="portrait"></div>
                <div class="col-6">
                    <h1 class="hi">Hi,<br>i'm chery</h1>
                    <h3 class="aboutme">Digital media expert with <br>over 12+ years of professional experience.</h3><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, adipisci, voluptatibus! Praesentium iusto ea tenetur eligendi in quas rem doloremque, illo, et iste id architecto quis? Id nisi delectus sed odio ab magni laborum recusandae quibusdam eos quidem ipsam, iste laboriosam illum natus odit doloremque voluptatem impedit repellendus commodi ducimus unde expedita aperiam consequuntur. Facilis.</p>
                </div>





            </div>
        </div>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body></html>

使用引导程序时，如何在两列中间覆盖文本

0 个答案: