CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jose Ramirez
Jose Ramirez

Reputation: 401

Centering an element inside div, Bootstrap

Here I'm using bootstrap. The idea is to center the h1 element inside the div, but I haven't as of now. It's always aligned to the left. I tried using the bootstrap's center-block helper class, and the float: none, margin: 0 auto approach, but it doesn't work. 

<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="row">
            ...
            <div class="col-md-8">
                <div id="some-div" class="row">
                    <p>Some text</p>
                </div>
            </div>
            ...
        </div>
    </div>
</nav>

Is there something I'm missing here? Like, is there a bootstrap specific way (e.g., some other helper class) of doing this? Or is it simply not possible?

Upvotes: 0

Views: 623

Answers (2)

isherwood
isherwood

Reputation: 61036

You probably don't need a nested row, and Bootstrap provides text alignment classes for you. A heading is a block-level element, but you can apply the text class to it or a parent element.

<div class="col-md-8">
    <div id="some-div">
        <h1 class="text-center">An H1 Heading</h1>
    </div>
</div>

Demo

Upvotes: 1

Dmitriy
Dmitriy

Reputation: 4503

div{
  width: 200px;
  height: 200px;
  line-height: 200px;
  background: #ccc;
  text-align: center;
}

h1{
  font-size: 15px;
}
<div>
  <h1>Text H1</h1>
</div>

Upvotes: 0

Related Questions