zerbretzler zerbretzler - 5 months ago 12
CSS Question

Bootstrap 3 - How to center Headings and <span>?

how can i center a heading or something i styled with "span" in a bootstrap3 column ?

if i use "text-center" and "p" tags - everything works fine .. but i need to style the text.

example (works fine):



<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 text-center"> <p> hello </p></div>





but this doesn't work. i want to change the size and the color of the text and then center it.



<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 text-center"> <h1> hello </h1></div>




Answer

There are two things you can do:

a) apply 'text-center' class to the h1

<h1 class="text-center">

b) apply this style to h1:

h1 {
 display:inline-block;
}

The reason that the h1 text isn't centering is because the 'text-center' class of the parent applies to the element h1 and NOT its contents, which occupies the whole width, so you can't center a full width element; it just occupies the whole width.

Applying text-center class on the h1 elements, centers its inner contents.

Applying 'display:inline-block' gives the h1 element a width equal to it's contents, thus it can be centered.