1

Why are my margin-right & margin-left that are set at auto for the .banner-logo-content class not centering the div?

The

This is my CSS

@import 'bootstrap';

.navbar {
    border-radius: 0px;
    font-size: 16px;
    padding-left: 150px;
    padding-right: 150px;
    margin: 0px;
    background-color: white;
}

.navbar-default .navbar-nav > li > a {
    color: #f0ad4e
}

.navbar-brand {
    font-size: 22px;
}

.navbar-default .navbar-brand {
    color: #f0ad4e;
}

.banner-home {
    height: 400px;
    background-color: #f0ad4e;
    padding: 100px;
}

.banner-logo-container {
    width: 1170px;
    margin: 30px;
    border: 1px solid;
}

.banner-logo-content {
    margin-right: auto;
    margin-left: auto;
    border: 1px solid;
    font-size: 108px;
    color: white;
}

This is my page:

<div class="banner-home">
      <div class="col-md-12">
        <div class="banner-logo-container">  
          <span class="banner-logo-content">E!</span>
        </div>
        <div class="banner-text">
          <p>Crowdsourcing Scientific Innovation</p>
        </div>
      </div>
</div>
user3408293
  • 1,377
  • 6
  • 18
  • 26
  • banner-logo-content is a span, which means it's display inline. You can put `text-align: center` on banner-logo-container and get right of the auto margin on the logo content span – Huangism Apr 03 '14 at 13:34
  • The container won't resize with this solution and get's cut off on small screen. How can I make it dynamic? – user3408293 Apr 03 '14 at 21:49
  • http://jsfiddle.net/uw77f/ I've set the width to 100% so the box becomes dynamic when resizing. – Dan Johnson Apr 04 '14 at 07:33

2 Answers2

0

Add text-align:center in the CSS for the .banner-logo-content

http://jsfiddle.net/2b8Hs/1/

Dan Johnson
  • 1,480
  • 17
  • 36
0

You should refer to this post to understand, why it's not working:

Why margin:auto doesn't work?

Community
  • 1
  • 1
b4ttl3m4st3r
  • 106
  • 11