एचटीएमएल हेडर केंद्र में नहीं होगा

Question

मैं एक सिंगल पेज स्क्रॉल करने योग्य वेबसाइट बना रहा हूं और चाहता हूं कि पहला पेज सिर्फ एक नेवबार, इमेज और हेडर हो। अब समस्या यह है कि मैं हेडर को केन्द्रित करने में असमर्थ था। ठीक है, कम से कम मुझे यह क्षैतिज रूप से केंद्र में मिला। लेकिन मैं इसे लंबवत रूप से केंद्रित करने में असमर्थ हूं। मुझे उम्मीद है कि कोई इस मुद्दे को देख सकता है क्योंकि मैं इस कष्टप्रद मुद्दे को घंटों से उलझा रहा हूं।

यह: https://startbootstrap.com/previews/grayscale/ वह विचार है जो मैं जा रहा हूं के लिए, इसे स्पष्ट करने के लिए।

यहाँ कोड है

/*body {
        background: linear-gradient(rgba(#F9774C, .75), rgba(#802A0C, .85));
        background-image: url("Background_photo_2.jpg");
        background-size: cover;
        box-shadow: 4056 3000px rgba(0, 0, 0, 0) inset;
          /* Center and scale the image nicely 
        background-position: center;
        background-repeat: no-repeat;
        height: 50%;
                }*/ 
    
    nav {
        font-size: medium;
    }
    
    .nav-item a{
        color: white !important
    }
    
     body, html {
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: 'Montserrat', sans-serif;
     }
    
    /*styles background image*/
    .bg-img {
        /*background-image: url("Background_photo_2.jpg");*/
    
        height: 100%;
    
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    
        box-shadow: 4000px 3000px rgba(0, 0, 0, 0.6) inset;
        
    }          
    
    /* use this to change the general fonts */
    p, h1  {
        color: white;
        
    }
    
    /* arranges navbar items to right */
    ul {
        margin-left: auto;
    }
    
    .bg-img.container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #content {
        width: 100%;
        height: 85%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /*.container-fluid {
        width: 70%;
    }

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home - Both Sides Now </title>
  <!-- BOOTSTRAP CDN IMPLEMENTATION-->

  <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">
  <!-- Links to the stylesheet-->
  <link rel="stylesheet" type="text/css" href="style.css">

  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>

<body>
  <div class="bg-img">
    <!--This is the navbar-->
    <div class="container col-md-10">
      <nav class="navbar transparant navbar-expand-lg navbar-dark">
        <a class="navbar-brand" href="index.html"><img src="logotransparant.gif" class="d-inline-block align-top" width="60" height="60"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
          </ul>
        </div>
      </nav>

    </div>

    <header class="masthead d-flex h-100 justify-content-center">
      <div class="container ">
        <div class="mx-auto text-center">
          <h1 class="mx-auto my-0 text-uppercase">Grayscale</h1>
          <h2 class="text-white-50 mx-auto mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
          <a href="#about" class="btn btn-primary js-scroll-trigger">Get Started</a>
        </div>
      </div>
    </header>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>
</div>

</html>

html css bootstrap-4

0

Sjos Sivlingworkz 8 अप्रैल 2020, 20:42

Answer 1

nav {
            font-size: medium;
        }
        
        .nav-item a {
            color: white !important
        }
        
        body,
        html {
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: 'Montserrat', sans-serif;
        }
        /*styles background image*/
        
        .bg-img {
            /*background-image: url("Background_photo_2.jpg");*/
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            box-shadow: 4000px 3000px rgba(0, 0, 0, 0.6) inset;
        }
        /* use this to change the general fonts */
        
        p,
        h1 {
            color: white;
        }
        /* arranges navbar items to right */
        
        ul {
            margin-left: auto;
        }
        
        .bg-img.container {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #content {
            width: 100%;
            height: 85%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /*.container-fluid {
        width: 70%;
    } */
        
        .mx-auto {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home - Both Sides Now </title>
    <!-- BOOTSTRAP CDN IMPLEMENTATION-->

    <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">
    <!-- Links to the stylesheet-->
    <link rel="stylesheet" type="text/css" href="style.css">

    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>

<body>
    <div class="bg-img">
        <!--This is the navbar-->
        <div class="container col-md-10">
            <nav class="navbar transparant navbar-expand-lg navbar-dark">
                <a class="navbar-brand" href="index.html"><img src="logotransparant.gif" class="d-inline-block align-top" width="60" height="60"></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                    </ul>
                </div>
            </nav>

        </div>

        <header class="masthead d-flex h-100 justify-content-center">
            <div class="container">
                <div class="mx-auto text-center">
                    <h1 class="my-0 text-uppercase">Grayscale</h1>
                    <h2 class="text-white-50 mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
                    <a href="#about" class="btn btn-primary js-scroll-trigger">Get Started</a>
                </div>
            </div>
        </header>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>
</div>

</html>

0

hamidrun 8 अप्रैल 2020, 22:57

Answer 2

लंबवत केंद्र करने के लिए दो विकल्प हैं

आपको अपने navigation bar को स्थिति देने की आवश्यकता है ताकि यह flexbox में गणना न करे, इसके लिए आपको अपना कोड थोड़ा बदलना होगा।
आपको अपने पृष्ठ से अपनी navigation bar ऊंचाई काटने की जरूरत है, इसलिए यह flexbox में गणना नहीं करता है, मैंने आपकी नावबार ऊंचाई की गणना की है और इसके बराबर 86px है, इसलिए मैं 172px} आपके पेज से

अब आपको सबसे अच्छा तरीका चुनना है, मेरी तरफ से, पहला दूसरे से बेहतर है।

पहला विचार

अभी-अभी align-items-center vh-100 को masthead क्लास टैग में जोड़ा है और CSS जोड़ा है

.bg-img > .container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

/*body {
        background: linear-gradient(rgba(#F9774C, .75), rgba(#802A0C, .85));
        background-image: url("Background_photo_2.jpg");
        background-size: cover;
        box-shadow: 4056 3000px rgba(0, 0, 0, 0) inset;
          /* Center and scale the image nicely 
        background-position: center;
        background-repeat: no-repeat;
        height: 50%;
                }*/ 
    
    nav {
        font-size: medium;
    }
    
    .nav-item a{
        color: white !important
    }
    
     body, html {
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: 'Montserrat', sans-serif;
     }
    
    /*styles background image*/
    .bg-img {
        /*background-image: url("Background_photo_2.jpg");*/
    
        height: 100%;
    
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    
        box-shadow: 4000px 3000px rgba(0, 0, 0, 0.6) inset;
        
    }          
    
    /* use this to change the general fonts */
    p, h1  {
        color: white;
        
    }
    
    /* arranges navbar items to right */
    ul {
        margin-left: auto;
    }
    
    .bg-img.container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #content {
        width: 100%;
        height: 85%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /*.container-fluid {
        width: 70%;
    }*/
    
    .bg-img > .container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home - Both Sides Now </title>
  <!-- BOOTSTRAP CDN IMPLEMENTATION-->

  <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">
  <!-- Links to the stylesheet-->
  <link rel="stylesheet" type="text/css" href="style.css">

  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>

<body>
  <div class="bg-img">
    <!--This is the navbar-->
    <div class="container col-md-10">
      <nav class="navbar transparant navbar-expand-lg navbar-dark">
        <a class="navbar-brand" href="index.html"><img src="logotransparant.gif" class="d-inline-block align-top" width="60" height="60"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
          </ul>
        </div>
      </nav>

    </div>

    <header class="masthead d-flex vh-100 align-items-center justify-content-center">
      <div class="container ">
        <div class="mx-auto text-center">
          <h1 class="mx-auto my-0 text-uppercase">Grayscale</h1>
          <h2 class="text-white-50 mx-auto mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
          <a href="#about" class="btn btn-primary js-scroll-trigger">Get Started</a>
        </div>
      </div>
    </header>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>
</div>

</html>

दूसरा विचार

अभी-अभी align-items-center को masthead क्लास टैग में जोड़ा है और CSS जोड़ा है

.masthead {
    height: calc(100vh - 172px);
}

/*body {
        background: linear-gradient(rgba(#F9774C, .75), rgba(#802A0C, .85));
        background-image: url("Background_photo_2.jpg");
        background-size: cover;
        box-shadow: 4056 3000px rgba(0, 0, 0, 0) inset;
          /* Center and scale the image nicely 
        background-position: center;
        background-repeat: no-repeat;
        height: 50%;
                }*/ 
    
    nav {
        font-size: medium;
    }
    
    .nav-item a{
        color: white !important
    }
    
     body, html {
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: 'Montserrat', sans-serif;
     }
    
    /*styles background image*/
    .bg-img {
        /*background-image: url("Background_photo_2.jpg");*/
    
        height: 100%;
    
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    
        box-shadow: 4000px 3000px rgba(0, 0, 0, 0.6) inset;
        
    }          
    
    /* use this to change the general fonts */
    p, h1  {
        color: white;
        
    }
    
    /* arranges navbar items to right */
    ul {
        margin-left: auto;
    }
    
    .bg-img.container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #content {
        width: 100%;
        height: 85%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /*.container-fluid {
        width: 70%;
    }*/
    
    .masthead {
      height: calc(100vh - 172px);
    }

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home - Both Sides Now </title>
  <!-- BOOTSTRAP CDN IMPLEMENTATION-->

  <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">
  <!-- Links to the stylesheet-->
  <link rel="stylesheet" type="text/css" href="style.css">

  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>

<body>
  <div class="bg-img">
    <!--This is the navbar-->
    <div class="container col-md-10">
      <nav class="navbar transparant navbar-expand-lg navbar-dark">
        <a class="navbar-brand" href="index.html"><img src="logotransparant.gif" class="d-inline-block align-top" width="60" height="60"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
          </ul>
        </div>
      </nav>

    </div>

    <header class="masthead d-flex align-items-center justify-content-center">
      <div class="container ">
        <div class="mx-auto text-center">
          <h1 class="mx-auto my-0 text-uppercase">Grayscale</h1>
          <h2 class="text-white-50 mx-auto mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
          <a href="#about" class="btn btn-primary js-scroll-trigger">Get Started</a>
        </div>
      </div>
    </header>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>
</div>

</html>

0

Community 20 जून 2020, 12:12

Answer 3

शैलियों का उपयोग करने की आवश्यकता नहीं है। बूटस्ट्रैप यह आपके लिए करता है:


<header class="row align-items-center masthead d-flex h-100 justify-content-center">
  <div class="container ">
    <div class="mx-auto text-center">
      <h1 class="mx-auto my-0 text-uppercase">Grayscale</h1>
      <h2 class="text-white-50 mx-auto mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
      <a href="#about" class="btn btn-primary js-scroll-trigger">Get Started</a>
    </div>
  </div>
</header>

शीर्षलेख div में दो वर्ग जोड़ें जिन्हें मैंने ऊपर जोड़ा है।

नोट : आपके द्वारा पंक्ति वर्ग जोड़ने के बाद आपको अपने सामग्री तत्वों में col जोड़ना पड़ सकता है।

0

Amir7 8 अप्रैल 2020, 21:27

एचटीएमएल हेडर केंद्र में नहीं होगा

3 जवाब

पहला विचार

दूसरा विचार

संबंधित सवाल

नए सवाल