html - bootstrap modal bad positionned

Question

i'm using a bootstrap modal , when i put it within a div which align attribute is centrer , the modal is not well positionned

example

<div class="content" id="content" align="center">
 <div id="div" class="modal hide fade" tabindex="-1" role="dialog"
                aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 id="divTitle">
                </h3>


                </div>
                <div id="divBody" class="modal-body">
                </div>
                <div  class="modal-footer">
                <input type="button" class="btn" class="close" data-dismiss="modal" value="fermer">
                </div>
                </div>  

</div>

what is the solution ?

Answer 1

You can do it with a fixed width positioned in center and with negative margins with half of the width and half of the height. So for a div with id your_div that is 200x200 in size, you'd do:

#your_div {
    width: 200px;
    height: 200px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
}