CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Kallol Das
Kallol Das

Reputation: 141

margin: 0 auto is not working on bootstrap

Here is my code:

<div class="container-fluid">
        <div class="carousel slide" data-ride = "carousel" style="position: relative">
            <div class="carousel-inner" role="listbox">
                 <div class="item active">
                 <img src="images/slide-1.jpg">
                 </div>
                 <div class="item">
                 <img src="images/slide-2.jpg">
                 </div>
                 <div class="item">
                 <img src="images/slide-3.jpg">
                 </div>
            </div>
        </div>
        <div class="container" style="background-color:#fff; top: 50px; margin: 0 auto;">
            <h1>Hello</h1>
        </div>
</div>

Here is the output:

The problem is "container" div is not centering. I know the "position: absolute" is the main trouble maker but how can i position the div without "position: absolute"? What is the solution?

Upvotes: 1

Views: 6378

Answers (3)

Mo Shal
Mo Shal

Reputation: 1637

you must define the width of parent div and container then you can use

margin:0 auto;

or if container's width is 70% 

margin-left:15%; 
margin-right:15%;

15% = (100 - container's width) / 2

Upvotes: 1

Pavindu
Pavindu

Reputation: 3112

Just use text-align: center; for parent and display: inline-block for the child.It is that simple.For more info, check out this medium article published by freecodecamp.

Upvotes: 2

Pradeep Pansari
Pradeep Pansari

Reputation: 1297

You can use following code for center..

.container{
  background-color:#fff; 
  position: absolute; 
  top: 50px; 
  left:50%;
  transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  -moz-transform:translate(-50%, -50%);
}

<div class="container">
        <h1>Hello</h1>
</div>

Upvotes: 5

Related Questions