0

I seem to have troubles centring my div and center-block doesn't seem to work. I intend to center the nested div containing the <p> tag. I am not so much trying to center the content inside the div. As such I would like have the center peroperty apply to the div itself rather than its contents.

<div class="container">
    <div class="row">
        <div class="col-xs-12 center-block">
            <h1>{{secretDisplay.secretTitle}}</h1>
                <div class="row center-block" style="text-align:left">
                    <div class="col-xs-12 center-block" style="text-align:left">
                        <p contenteditable="true" class="chat_window">
                            <img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/>
                        </p>
                    </div>
                </div>
                <div>
                    <p contenteditable="true" class="write_window">This is the test</p>
                </div>
        </div>
     </div>
</div>

CSS

.center-block {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

The page must be mobile responsive so Bootstrap's offset might cause issues.

Any advice would be highly appreciated.

Mike

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Mike Nedelko
  • 709
  • 1
  • 8
  • 28

1 Answers1

1

You cannot center a col-xs-12. It is near-100% of the available width, plus some margins. It simply has nowhere to go. If you want the contents of center-block to appear centered, which is what I'm assuming, do this: 

.center-block {
   text-align: center;
}

And you might also want to remove this class from the row.

Rando Hinn
  • 1,255
  • 19
  • 41
  • 1
    Bootstrap actually already has a class of its own: `.text-center` - see [Bootstrap Type Alignment](http://getbootstrap.com/css/#type-alignment) – Aziz Apr 09 '16 at 18:19
  • Hi Rando. Thank you for this. I would like the center property to apply to the div rather than the content inside the div. Will edit the question accordingly. Apology. – Mike Nedelko Apr 09 '16 at 18:19
  • 2
    You cannot center a `col-xs-12`. It is near-100% of the available width, plus some margins. It simply has nowhere to go. – Rando Hinn Apr 09 '16 at 18:21
  • Ah! Thats were my error is! Thank you. However, when I change the col-xs-12 to say 3, it doesn't scale for mobile views anymore. – Mike Nedelko Apr 09 '16 at 18:22