CODEWITHSUNDEEP
htmlcss
Andrew Robinson
Andrew Robinson

Reputation: 258

css div won't center

I've been searching this site for answers to this question, but none have worked or I already had the given answer within my code. So, here's my code:

@import url(http://fonts.googleapis.com/css?family=Roboto:500,400italic,300,500italic,300italic,400);
@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
html {
  font-family: Roboto, sans-serif;
  width: 100%;
  height: 100%;
}
body {
  margin: 0 0 0 0;
  width: 100%;
  height: 100%;
}
.the-big-image {
  margin: 0 0 0 0;
  width: 100%;
  height: 100%;
  background-image: url(img/rocks.jpg);
}
.the-big-image-cover {
  margin: 0 0 0 0;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(rgba(0, 77, 64, 0.28), rgba(0, 0, 0, 0.5));
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(rgba(0, 77, 64, 0.28), rgba(0, 0, 0, 0.5));
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgba(0, 77, 64, 0.28), rgba(0, 0, 0, 0.5));
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(0, 77, 64, 0.28), rgba(0, 0, 0, 0.5));
  /* Standard syntax */
}
nav {
  margin: 0 0 0 0;
  width: 100%;
  height: 70px;
}
.nav-wrapper {
  margin: 0 auto 0 auto;
  width: 70%;
  height: 100%
}
.brand-logo {
  font-family: quicksand, sans-serif;
  color: rgba(0, 0, 0, .7);
  font-size: 40pt;
  font-weight: 300;
  display: inline-block;
  margin: 0 auto 0 auto;
  width: 300px;
}
.text-center {
  text-align: center;
}
.divider {
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 5px #888888;
}
.hamburger-container {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  dispaly: inline-block;
}
.icon-bar {
  margin: 4px 4px 4px 4px;
  display: block;
  width: 45px;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 2px;
}
.right {
  float: right;
}
<body>
  <div class="the-big-image">
    <div class="the-big-image-cover">
      <nav>
        <div class="nav-wrapper">
          <span class="brand-logo text-center">logo</span>
          <button class="hamburger-container right">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
      </nav>
      <div class="divider"></div>`

I really just want to know why class .brand-logo will not center. I set a width for it. I set the width on it. I made sure it wasn't a block element. I added the margin code with auto. Why won't it work?

Upvotes: 3

Views: 2490

Answers (4)

Swaranan Singha Barman
Swaranan Singha Barman

Reputation: 347

Add text-align:center in .nav-wrapper

Fiddle

Upvotes: 1

chiapa
chiapa

Reputation: 4412

You must text-align: center the parent div. You have text-align: center for the .brand-logo class and that alone won't center the logo. It's the parent that must have text-align set to center in order to center its contents.

Fiddle

.nav-wrapper {
  margin: 0 auto 0 auto;
  width: 70%;
  height: 100%;
  text-align: center;
}

Upvotes: 0

Michael Podrybau
Michael Podrybau

Reputation: 165

You're missing a semicolon in your CSS for the parent element. Fixing that and adding text-align: center; worked for me. Try this.

.nav-wrapper {
    margin: 0 auto 0 auto;
    width: 70%;
    height: 100%;
    text-align: center;
}

Upvotes: 3

Brino
Brino

Reputation: 2502

Your logo is centered in your span, but your span is not the full width of the navbar. Pull your logo out into a new div with absolute positioning, and center it within that div. See example below:

@import url(http://fonts.googleapis.com/css?family=Roboto:500,400italic,300,500italic,300italic,400);
@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
html {
  font-family: Roboto, sans-serif;
  width: 100%;
  height: 100%;
}
body {
  margin: 0 0 0 0;
  width: 100%;
  height: 100%;
}
.the-big-image {
  margin: 0 0 0 0;
  width: 100%;
  height: 100%;
  background-image: url(img/rocks.jpg);
}
.the-big-image-cover {
  margin: 0 0 0 0;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(rgba(0, 77, 64, 0.28), rgba(0, 0, 0, 0.5));
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(rgba(0, 77, 64, 0.28), rgba(0, 0, 0, 0.5));
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgba(0, 77, 64, 0.28), rgba(0, 0, 0, 0.5));
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(0, 77, 64, 0.28), rgba(0, 0, 0, 0.5));
  /* Standard syntax */
}
nav {
  margin: 0 0 0 0;
  width: 100%;
  height: 70px;
}
.nav-wrapper {
  margin: 0 auto 0 auto;
  width: 70%;
  height: 100%
}
.brand-logo {
  font-family: quicksand, sans-serif;
  color: rgba(0, 0, 0, .7);
  font-size: 40pt;
  font-weight: 300;
  display: inline-block;
  margin: 0 auto 0 auto;
  width: 300px;
}
.text-center {
  text-align: center;
}
.divider {
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 5px #888888;
}
.hamburger-container {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  dispaly: inline-block;
}
.icon-bar {
  margin: 4px 4px 4px 4px;
  display: block;
  width: 45px;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 2px;
}
.right {
  float: right;
}
.logoDiv{
position: absolute;
width: 100%;
text-align:center;
margin: auto;
}
<body>
  <div class="the-big-image">
    <div class="the-big-image-cover">
      <nav>
        <div class="logoDiv">
          <span class="brand-logo text-center">logo</span>
        </div>
        <div class="nav-wrapper">
          <button class="hamburger-container right">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
      </nav>
      <div class="divider"></div>`

Upvotes: 4

Related Questions