CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
capzulu
capzulu

Reputation: 105

How to center elements inside div

I'm using bootstrap 2.3.2. I have a div with some wells inside. Here is a Preview

My structure is

<body>
    <div class="page-header">
         <h1 id="title">Title</h1>
    </div>

    <div class="row">
        <div class="span3 my_span">
            <div class="well my_well">
                <h1>Text</h1>
                <hr>
                <p>More Text</p>
                <hr>
                <button class="btn btn-primary">Button</button>
            </div>
        </div>

        <div class="span3 my_span">
            <div class="well my_well">
                <h1>Textr</h1>
                <hr>
                <p>More Text</p>
                <hr>
                <button class="btn btn-primary">Button</button>
            </div>
        </div>

        <div class="span3 my_span">
            <div class="well my_well">
                <h1>Textr</h1>
                <hr>
                <p>More Text</p>
                <hr>
                <button class="btn btn-primary">Button</button>
            </div>
        </div>
    </div>
</body>

The wells are inside a row div, how to center all the wells horizontally?

Here is the jsfiddle with the code.

Upvotes: 0

Views: 126

Answers (3)

Natalie Chouinard
Natalie Chouinard

Reputation: 1522

I think this is what you were describing: Fullscreen View

See jsfiddle

I modified my_span:

.my_span {
    width: 300px;
    margin: 0 33px;
    float: none;
    display:inline-block;
}

and added:

.row {
    text-align: center;
    margin: 0;
}

EDIT: I edited the fiddle a bit to fix the margins.

Upvotes: 1

Petar Vasilev
Petar Vasilev

Reputation: 4725

You can do

.parent-of-centered-div {
    text-align: center;
}
.centered-div {
    display:inline-block;
    width: 20px; /* needs fixed width */   
}

Upvotes: 0

Hacknightly
Hacknightly

Reputation: 5144

Just use margin: 0 auto to set your divs to be centered.

 .my_span {
     width: 300px;
     margin: 0 auto;
 }

http://jsfiddle.net/BVmUL/367/

Upvotes: 0

Related Questions