0

how are you doing ? I hope all is well with you there. Guys i m stuck in some place and i need your help. please go through the pic1 & pic2 attached with this post. I want the output of pic1 looks similar to the pic2.

Actually i need to centered the logo and it should be above the h1 tag for example check pic2.

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }
  body {
    font-family: sans-serif;
  }

  /* Global Styles */

  .container {
    width: 80%;
    margin: auto;
  }

  header {
    background-color: #009866;
    padding: 10px;
  }

  #branding {
    float: left;
  }
  #branding h1 {
    margin-left: 15px;
    color:white;
  }

  .navbar {
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
  }

  .navbar li {
    padding:6px;
  }
  .navbar li a  {
    text-decoration: none;
    color: white;
  }
  #cent-logo h1 {
    text-align: center;
  }
  #cent-logo img {

  }

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="StyleSheets/style.css">
</head>
<body>

<header>
   <section>
       <div id="branding">
           <h1>MJCET</h1>
       </div>
       <nav>
           <ul class="navbar">
               <li><a href="#">LOGIN</a></li>
               <li><a href="#">SIGN UP</a></li>
           </ul>
       </nav>
   </section>
</header>

    <section>
        <div class="container">
            <div id="cent-logo">
                <img src="Resources/logo.png">
                <h1>Sign in to MJC316</h1>
            </div>
        </div>

    </section>

</body>
</html>

pic1-this is my code

pic2-i want the output like this

Syed
  • 33
  • 12
  • change this `#cent-logo h1 { text-align: center; }` to this `#cent-logo{ text-align: center; }` – Temani Afif Sep 30 '18 at 12:57
  • i done that but that's not work, – Syed Sep 30 '18 at 13:08
  • and i have different question, in the above question which has already been asked is only for centering the image, i need help to center the img as well as it must be top & in the center of the heading tag. but just marked it as duplicated sir – Syed Sep 30 '18 at 13:10
  • check this : https://jsfiddle.net/9es8w7xg/ I added the code I commented and it's working fine, it's also like described in the duplicate – Temani Afif Sep 30 '18 at 13:38
  • 1
    by the way the answer you accepted is also in the duplicate question (if took the time to check it) – Temani Afif Sep 30 '18 at 13:40

1 Answers1

1

The following goes in your CSS

img {
  display: block;
  margin-left: auto;
  margin-right: auto;    
}

Have a look at https://www.w3schools.com/howto/howto_css_image_center.asp if you have any issues.

Hope this helps.

Nathan Rhodes
  • 91
  • 6