CODEWITHSUNDEEP
htmlcss
user6161942
user6161942

Reputation:

CSS - Div not centering properly

I am trying to center a div, but it is not working. As you can see in the code below, I have the margin set, but the div doesn't move to the center.

body {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
  font-weight: bold;
}

.body {
  margin: 0 auto;
}

ul {
  list-style-type: none;
  background-color: black;
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  width: 700px;
}

li {
  float: left;
}

li a {
  color: white;
  display: block;
  padding: 14px 16px;
  text-align: center;
  text-decoration: none;
}

.one, .two, .three, .name {
  border-bottom: 4px solid black;
}

.one:hover {
    border-color: #ED08FD;
}

.two:hover {
    border-color: #0821FD;
}

.three:hover {
    border-color: #FF41C0;
}

.name:hover {
  border-color: #DAD8D9;
}

.name {
  color: white;
  padding-left: 15px;
}

.main-body {
  text-align: center;
}

hr {
  border: 1px solid #6E6E6E;
}

.circle-row {
  width: 100px;ext-align: left;
  padding-left: 4cm;
  font-size: 35px;
}

.welcomeHeader, .background {
  border: 2px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="animate.css">
</head>
<body>
  <div class="body">
  <div class="navbar">
    <ul>
      <li class="name"><a href="#">JordanCodes</a></li>
      <li class="one"><a href="#">One</a></li>
      <li class="two"><a href="#">Two</a></li>
      <li class="three"><a href="#">Three</a></li>
    </ul>
  </div>

  <div class="header">
    <img src="header-background.jpg">
  </div>

  <div class="main-body">
    <h1 id="welcomeHeader">JordanCodes</h1>

    <br>
    <br>
    <br>
    <br>

  </div>
</div>
  <script src="scripts.js"></script>
</body>
</html>

I have tried setting the width to 50%, which works, but since have the ul width set to 700px the div doesn't center properly.

Upvotes: 0

Views: 266

Answers (3)

Yash Jain
Yash Jain

Reputation: 1

The property I'm using to center, or at least make it close to center should work. What I've done is added this css.

.one {
    margin-left: 125px /*you can modify this*/;
}

You can also change the .one to .name, but .one looks better;

body {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
  font-weight: bold;
}

.body {
  margin: 0 auto;
}

ul {
  list-style-type: none;
  background-color: black;
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  width: 700px;
}

li {
  float: left;
}

li a {
  color: white;
  display: block;
  padding: 14px 16px;
  text-align: center;
  text-decoration: none;
}

.one {
  margin-left: 125px;
}
.one, .two, .three, .name {
  border-bottom: 4px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="animate.css">
</head>
<body>
  <div class="body">
  <div class="navbar">
    <ul>
      <li class="name"><a href="#">JordanCodes</a></li>
      <li class="one"><a href="#">One</a></li>
      <li class="two"><a href="#">Two</a></li>
      <li class="three"><a href="#">Three</a></li>
    </ul>
  </div>

  <div class="header">
    <img src="header-background.jpg">
  </div>

  <div class="main-body">
    <h1 id="welcomeHeader">JordanCodes</h1>

    <br>
    <br>
    <br>
    <br>

  </div>
</div>
  <script src="scripts.js"></script>
</body>
</html>

Upvotes: 0

user6215161
user6215161

Reputation:

on your styles.css try changing this:

ul {
  list-style-type: none;
  background-color: black;
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  width: 700px;
}

to this:

ul {
  list-style-type: none;
  background-color: black;
  margin: 0 auto 0; /* When 3 values are entered, the first one is the value for the top margin, the second is for the horizontal margin and the third one is for the bottom margin */
  padding: 0;
  overflow: hidden;
  -webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  width: 700px;
}

this should make your navbar to display at the center of your page, i hope this works well for you!

Upvotes: 1

Rob Frank
Rob Frank

Reputation: 377

If you want to center your ul element, try adding this:

body {width:100%;}
ul {margin:auto;}

please see: https://jsfiddle.net/ty8858hq/

Upvotes: 1

Related Questions