CODEWITHSUNDEEP
htmlcss
Sami Al-Subhi
Sami Al-Subhi

Reputation: 4662

centering a div is not working

I did the magic trick to center a div by giving it a margin:--px auto but it does not work. what could be the issue here?

https://jsfiddle.net/1zptxa7h/3/

<div class="single-view-container" style="display: block;">
     <div id="single-view" class="single-view grid-100 grid-parent">center me</div>
</div>

  .single-view-container {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 3;
      overflow: auto;
      background: rgba(0, 0, 0, 0.3);
      display: none;}

  .single-view {
      color: white;
      max-width: 100px;
      width: 100%;
      display: inline-block;
      margin: 20px auto;
      height:100px;
      background:red;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
      border-radius: 2px;
      padding-bottom: 10px;
  }

Upvotes: 0

Views: 39

Answers (6)

alejandrosobko
alejandrosobko

Reputation: 61

You are using bootstrap? Put in your element "text-center" to center it.

<div class="single-view-container text-center" style="display: block;">
  <div id="single-view" class="single-view grid-100 grid-parent">center me</div>
</div>

Upvotes: 0

Ronnie Smith
Ronnie Smith

Reputation: 18555

Centered.

#single-view {
  width:200px;
  background: green;
  margin-left:auto;
  margin-right:auto;
}
  <div id="single-view">center me</div>

Upvotes: 0

user379888
user379888

Reputation:

JSFiddle.

Add,

  text-align:center;
  display:block;

HTML:

<div class="single-view-container" style="display: block;">
     <div id="single-view" class="single-view grid-100 grid-parent">center me</div>
</div>

CSS:

.single-view-container {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 3;
      overflow: auto;
      background: rgba(0, 0, 0, 0.3);
      display: none;}

  .single-view {
      color: white;
      max-width: 100px;
      width: 100%;
      margin: 20px auto;
      height:100px;
      background:red;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
      border-radius: 2px;
      padding-bottom: 10px;
      text-align:center;
      display:block;
  }

Upvotes: 0

Demon
Demon

Reputation: 56

Modify your css .single-view with this:

.single-view {
    color: white;
    text-align: center;
    max-width: 100px;
    width: 100%;
    display: inline-block;
    margin: 20px auto;
    height:100px;
    background:red;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
    border-radius: 2px;
    padding-bottom: 10px;
}

Upvotes: 0

jerrylow
jerrylow

Reputation: 2629

When you change an element to display: inline-block margin auto no longer works as it's an inline element you need to make its parent am have text-align: center;

.single-view-container {
  text-align: center;
}

Upvotes: 0

Asons
Asons

Reputation: 87191

The margin: 0 auto work on block elements with a fixed width, so if you change to display: block (or remove it completely as it is the default for a div) it will work as expected.

Side note: If to center an inline element (or inline-block), set text-align: center on its parent.

  .single-view-container {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 3;
      overflow: auto;
      background: rgba(0, 0, 0, 0.3);
      display: none;}

  .single-view {
      color: white;
      max-width: 100px;
      width: 100%;
      display: block;
      margin: 20px auto;
      height:100px;
      background:red;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
      border-radius: 2px;
      padding-bottom: 10px;
  }
<div class="single-view-container" style="display: block;">
     <div id="single-view" class="single-view grid-100 grid-parent">center me</div>
</div>

Upvotes: 1

Related Questions