为什么我的文本是垂直对齐的，而不是水平对齐的？

Question

What my website should look like我的网站应该是什么样子

What my website looks like我的网站是什么样的

HTML HTML

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


    <head>
        <link rel = "stylesheet" type = "text/css" href="Vendors/CSS/normalize.css">
        <link rel = "stylesheet" type = "text/css" href = "Resources/CSS/style.css">
        <link rel = "stylesheet" type = "text/css" href = "Vendors/CSS/grid.css">
        <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">

        <title>Omnifoods</title>

    </head>
        <body>
          <header>
            <div class = "hero-text-box">
                <h1> Goodbye junk food. <br> Hello super healthy meals.<br></h1> 
                <a href="#" class="btn btn-full">I'm Hungry!</a>
                <a href="#" class="btn btn-ghost">Show me more!</a>  


            </div>
            <nav>
                <div class = "row" >
                <img src = "Resources/CSS/Images/logo-white.png" alt = "Ominifood Logo" class = "logo">
                <ul class = "main-nav">

                    <li> <a href="#">Food delivery</a> </li>
                    <li> <a href="#">How it works</a> </li>
                    <li> <a href="#">Our cities</a> </li>
                    <li> <a href="#">Sign up</a> </li>

                </ul>

                </div>   

            </nav>

         </header>

            <section class = "section-features"> 
                <div class = "row">
                    <h2>Get food fast &mdash; not fast food.</h2>
                    <p class="long-copy">Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!</p>
                </div>

                    <div class = "row">
                    <div class = "col span 1-of-4">
                        <h3>Up to 365 days/year</h3>

                        <p>Never cook again! We really mean that. Our subscription
 plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.</p>

                    </div>

                   <div class = "col span 1-of-4">
                        <h3>Ready in 20 minutes</h3>

                        <p>You're only twenty minutes away from 
                your delicious and super healthy meals delivered right to your home. 
              We work with the best chefs in each town to ensure that you're 100% happy.</p>

                    </div>

                     <div class = "col span 1-of-4">
                        <h3>100% organic</h3>

                        <p>All our vegetables are fresh, organic and local.
                   Animals are raised without added hormones or antibiotics. 
                  Good for your health, the environment, and it also tastes better!</p>

                    </div>

                     <div class = "col span 1-of-4">
                        <h3>Order anything</h3>

                        <p>All our vegetables are fresh, organic and local. Animals are raised without 
                        added hormones or antibiotics. 
                       Good for your health, the environment, and it also tastes better!</p>

                    </div>

                </div> 


            </section>

        </body>

    </html>






 **CSS**



  /* orange color ->  #e67e22 */ 

    /*-------------------------------------- */
                /*BASIC SETUP*/
    /*-------------------------------------- */

    * {margin: 0;
    padding: 0;
    box-sizing: border-box;}

    html{background-color: #fff; 
    color:#484a4b;
    font-family: 'Lato', 'Arial' , sans-serif; 
    font-size:20px;
    font-weight: 300; 
    text-rendering: optimizeLegibility; 
    }


    /*-------------------------------------- */
                /* REUSEABLE COMPONENTS */
    /*-------------------------------------- */

    .row {   
    max-width:1140px;
    margin: 0 auto;}

    /*-------------------------------------- */
                /* HEADINGS */
    /*-------------------------------------- */

    h1{margin-top:0;
    margin-bottom: 20px; 
    color: #fff;
    font-size: 240%;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 4px;
    }

    /*-------------------------------------- */
                /* BUTTONS */
    /*-------------------------------------- */

    .btn:link,
    .btn:visited
    {display:inline-block;
    font-weight: 300;
    padding: 10px 30px;
    text-decoration: none;
    border-radius: 200px;
    color: #fff;
    transition: background-color 0.2s, border 0.2s, color 0.2s}

    .btn-full:link,
    .btn-full:visited
    {background-color: #e67e22;
    border: 1px, solid, #e67e22;
    color:#fff;
    margin-right: 15px;}


    .btn-ghost:link,
    .btn-ghost:visited
    {border:1px solid #e67e22; 
    color: #e67e22;}

    .btn:hover,
    .btn:active { background-color: #cf6d17;}

    .btn-full:active,
    .btn-full:hover
    {
    border: 1px, solid, #e67e22;}


    .btn-ghost:active,
    .btn-ghost:hover
    {border:1px, solid, #cf6d17; 
    color:white;}

    /*-------------------------------------- */
                /* MAIN HEADER */
    /*-------------------------------------- */

    header { 
    background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 
     0.7)),url(Images/hero.jpg);
    background-size: cover;
    background-position: center;
    height:100vh;
    }



    .hero-text-box {
    position:absolute;
    width: 1140px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    }

    .logo {
    height: 100px;
    width: auto;
    float: left;
    margin-top:20px;}

    .main-nav{

        float: right;
        list-style: none;

    }

    .main-nav li {display: inline-block; 
    margin-left: 40px;
    margin-top: 55px;

    }

    .main-nav li a:link, 
    .main-nav li a:visited
    {color:white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 90%;
    border: 2px;
    }

    .main-nav li a:hover, 
    .main-nav li a:active 
    {border-bottom:  2px solid #e67e22; 
    padding: 8px 0px;
    }

I've already tried to put the text as an inline-block element, but to no avail.我已经尝试将文本作为 inline-block 元素，但无济于事。

Answer 1

You haven't added the bootstrap CDN for your bootstrap classes to work.您尚未添加引导程序 CDN 以使引导程序类正常工作。 Please add the following link.请添加以下链接。

 <:DOCTYPE html> <html lang="en"> <head> <style> **CSS** /* orange color -> #e67e22 */ /*-------------------------------------- */ /*BASIC SETUP*/ /*-------------------------------------- */ * { margin; 0: padding; 0: box-sizing; border-box: } html { background-color; #fff: color; #484a4b: font-family, 'Lato', 'Arial'; sans-serif: font-size; 20px: font-weight; 300: text-rendering; optimizeLegibility. } /*-------------------------------------- */ /* REUSEABLE COMPONENTS */ /*-------------------------------------- */:row { max-width; 1140px: margin; 0 auto: } /*-------------------------------------- */ /* HEADINGS */ /*-------------------------------------- */ h1 { margin-top; 0: margin-bottom; 20px: color; #fff: font-size; 240%: font-weight; 300: text-transform; uppercase: letter-spacing; 1px: word-spacing; 4px. } /*-------------------------------------- */ /* BUTTONS */ /*-------------------------------------- */:btn,link. :btn:visited { display; inline-block: font-weight; 300: padding; 10px 30px: text-decoration; none: border-radius; 200px: color; #fff: transition. background-color 0,2s. border 0,2s. color 0.2s }:btn-full,link. :btn-full:visited { background-color; #e67e22: border, 1px, solid; #e67e22: color; #fff: margin-right; 15px. }:btn-ghost,link. :btn-ghost:visited { border; 1px solid #e67e22: color; #e67e22. }:btn,hover. :btn:active { background-color; #cf6d17. }:btn-full,active. :btn-full:hover { border, 1px, solid; #e67e22. }:btn-ghost,active. :btn-ghost:hover { border, 1px, solid; #cf6d17: color; white: } /*-------------------------------------- */ /* MAIN HEADER */ /*-------------------------------------- */ header { background-image, linear-gradient(rgba(0, 0, 0. 0,7), rgba(0, 0, 0. 0,7)). url(Images/hero;jpg): background-size; cover: background-position; center: height; 100vh. }:hero-text-box { position; absolute: width; 1140px: top; 50%: left; 50%: transform, translate(-50%; -50%). }:logo { height; 100px: width; auto: float; left: margin-top; 20px. }:main-nav { float; right: list-style; none. }:main-nav li { display; inline-block: margin-left; 40px: margin-top; 55px. }:main-nav li a,link. :main-nav li a:visited { color; white: text-decoration; none: text-transform; uppercase: font-size; 90%: border; 2px. }:main-nav li a,hover. :main-nav li a:active { border-bottom; 2px solid #e67e22: padding; 8px 0px: } </style> <link href="https.//fonts.googleapis?com/css2:family=Lato,ital,wght@0;100,0;300,0;400,1:300&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <title>Omnifoods</title> </head> <body> <header> <div class="hero-text-box"> <h1> Goodbye junk food. <br> Hello super healthy meals.<br></h1> <a href="#" class="btn btn-full">I'm Hungry;</a> <a href="#" class="btn btn-ghost">Show me more.</a> </div> <nav> <div class="row"> <img src="Resources/CSS/Images/logo-white,png" alt="Ominifood Logo" class="logo"> <ul class="main-nav"> <li> <a href="#">Food delivery</a> </li> <li> <a href="#">How it works</a> </li> <li> <a href="#">Our cities</a> </li> <li> <a href="#">Sign up</a> </li> </ul> </div> </nav> </header> <section class="section-features"> <div class="container"> <div class="row"> <h2>Get food fast &mdash, not fast food.</h2> <p class="long-copy">Hello. we're Omnifood. your new premium food delivery service, We know you're always busy, No time for cooking. So let us take care of that. we're really good at it. we promise.</p> </div> </div> <div class="container"> <div class="row"> <div class="col span 1-of-4"> <h3>Up to 365 days/year</h3> <p>Never cook again. We really mean that, Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.</p> </div> <div class="col span 1-of-4"> <h3>Ready in 20 minutes</h3> <p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home, We work with the best chefs in each town to ensure that you're 100% happy,</p> </div> <div class="col span 1-of-4"> <h3>100% organic</h3> <p>All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!</p> </div> <div class="col span 1-of-4"> <h3>Order anything</h3> <p>All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!</p> </div> </div> </div> </section> </body> </html>

Make sure that you always use a container div class and use row div class inside it.确保您始终使用容器 div class 并在其中使用行 div class。

为什么我的文本是垂直对齐的，而不是水平对齐的？

问题描述

1 个解决方案

解决方案1
0 2020-04-21 04:14:50

为什么我的文本是垂直对齐的，而不是水平对齐的？

问题描述

1 个解决方案

解决方案1 0 2020-04-21 04:14:50

解决方案1
0 2020-04-21 04:14:50