CODEWITHSUNDEEP
htmlcssmaterialize
KinsDotNet
KinsDotNet

Reputation: 1560

How can I center a div inside a div within a container?

I'm using the Materialize CSS front end framework and using margin: 0 auto; as I always have, and having a nightmare getting this div centered within its parent. What gives?

.outer {
  border: 1px solid red;
  height:100px;
}

.inner{
  border: 1px solid black;
  height:50px;
  margin: 0px auto;
}
<!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

<div class="container">
  <div class="row outer">
    <div class="col l6 inner">
    </div>
  </div>
  
</div>

http://codepen.io/kinsdotnet/pen/mEYJVg

Upvotes: 0

Views: 382

Answers (3)

Niles Tanner
Niles Tanner

Reputation: 4021

Try adding this to your inner class:

float:none !important;

it looks like the class col applies a float left, and that's why it doesn't center

Upvotes: 0

David Antoon
David Antoon

Reputation: 825

Absolute inside Relative

Set the position of the outer div to relative, the inner to absolute.

To make margin: 0px auto work, add left: 0; right:0;

Also you must specify width to the inner div.

if you want to center vertically,

just replace: 

margin: 0px auto

with:

margin: auto

Result:

.outer {
  border: 1px solid red;
  height:100px;
  position:relative;
}

.inner{
  border: 1px solid black;
  height:50px;
  margin: 0px auto;

  width:100px;
  position:absolute;
  left:0;
  right:0;
}
<!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

<div class="container">
  <div class="row outer">
    <div class="col l6 inner">
    </div>
  </div>
  
</div>

Upvotes: 0

user1775718
user1775718

Reputation: 1578

Materialise uses a grid system that floats elements. You can't use margin: auto on a floated element.

You'll need to either use offset classes form the grid, or rearrange the grid and that child element...

(http://codepen.io/jmsherry/pen/OXYVRL <-- like that)

Also, don't listen to the really bad advice of !important and Absolute positioning. There are better ways to do this...

Upvotes: 1

Related Questions