Center div on Bootstrap

Question

Center div on Bootstrap

Navigation

#1 by (3 votes)

2

Hello, I have a page in PHP where I'm using Bootstrap to do a simple search screen.

<div class="container">
    <img src="/img/logoSuivi.png" class="img-responsive center-block">
    <div class="well col-md-3">
        <div class="breadcrumb">
            <form class="status">
                <fieldset>
                    <div class="form-group">
                        <label for="repair-status-search">Ordre de service:</label>
                        <input class="form-control" id="code" name="code" type="text" placeholder="Ordre de service" value="" onkeypress="return searchKeyPress(event);">
                    </div>
                </fieldset>
            </form>
            <button class="btn btn-success center-block" id="submit">Recherche</button>
            <img src="/img/Preloader.gif" class="loader img-responsive center-block" style="display: none;">
        </div>
    </div>
</div>

link

On the page above you can see how it is.

PS : I'm using version 3.3.6

I would like to center horizontally and vertically from the div containing the Well class, how can I do this?

I can not just use the center-block as I used it in the image.

html bootstrap-3

asked by anonymous 01.03.2016 / 03:25

1 answer

Insert marginRight into a TextView by Java code Jquery Datatable Paging

score 3 · Accepted Answer

One solution would be to use the power of the transform property. With a small combination to other properties it is possiable to have a horizontal and vertical alignment. If you want the images to have a similar alignment, wrap all the divs in a container and apply the well class formatting to this container as you can see below.

.container {
   position: relative;
}

.well {
   position: absolute;
   top: 50%;
   right: 50%;
   transform: translate(50%, 50%);
}

This solution results in alignment to the parent div. In other words, the div.well will be in the center of the div.container. Anyway the size and position of the container div will influence the centering of the daughter div (well).