why margin property is not working?

Question

I would like to align contents of a class button into the middle on both horizontally and vertically.I used margin: auto property for that but which aligns the text vertically but not horizontal. I know it's possible to make it effective by using either text-align property or display:flex.but I just need a reason here about why the margin: auto property did not worked.I'm adding the snippet below.Thanks in advance.

Note here it's working fine vertically the problem not working horizontally .so how it can be duplicate of not working vertically?

#main-body{
    width: 100%;
    height: 95%;
    box-sizing: border-box;
    background: yellow;
}

#title-container{
    width:100%;
    height: 10%;
    background: red;
}

#button-container{
    width:100%;
    height: 10%;
    background-color: blue;
}

#data-container{
    padding: 5px;
    box-sizing: border-box;
    background-color: blueviolet;
}

.btn{
    width:25%;
    height: 100%;
    border: 1px solid black;
    /*margin:auto;*/
    float:left;
    box-sizing: border-box;
    /*margin:0px;*/
}
.btn-text{
    margin:auto;
    /*float:none;*/
    color: #ffffff;
}

<body>
  <div id="main-body">
    <div id="title-container"></div>
    <div id="button-container">
      <div id="home-button" class="btn">
        <p class="btn-txt">Home</p>
      </div>
      <div id="update-button" class="btn">
        <p class="btn-txt">Update</p>
      </div>
      <div id="delete-button" class="btn">
        <p class="btn-txt">Create New</p>
      </div>
      <div id="logout-button" class="btn">
        <p class="btn-txt">Log Out</p>
      </div>
    </div>
    <div id="data-container"></div>
  </div>
</body>

i know it is possible to done using text-align:center;

    #main-body{
        width: 100%;
        height: 95%;
        box-sizing: border-box;
        background: yellow;
    }

    #title-container{
        width:100%;
        height: 10%;
        background: red;
    }

    #button-container{
        width:100%;
        height: 10%;
        background-color: blue;
        text-align:center;
        
    }

    #data-container{
        padding: 5px;
        box-sizing: border-box;
        background-color: blueviolet;
        
    }

    .btn{
        width:25%;
        height: 100%;
        border: 1px solid black;
        /*margin:auto;*/
        float:left;
        box-sizing: border-box;
        /*margin:0px;*/
    }
    .btn-text{
        margin:auto;
        /*float:none;*/
        color: #ffffff;
    }

<body>
  <div id="main-body">
    <div id="title-container"></div>
    <div id="button-container">
      <div id="home-button" class="btn">
        <p class="btn-txt">Home</p>
      </div>
      <div id="update-button" class="btn">
        <p class="btn-txt">Update</p>
      </div>
      <div id="delete-button" class="btn">
        <p class="btn-txt">Create New</p>
      </div>
      <div id="logout-button" class="btn">
        <p class="btn-txt">Log Out</p>
      </div>
    </div>
    <div id="data-container"></div>
  </div>
</body>

it's also working fine with display:flex;

#main-body{
    width: 100%;
    height: 95%;
    box-sizing: border-box;
    background: yellow;
}

#title-container{
    width:100%;
    height: 10%;
    background: red;
}

#button-container{
    width:100%;
    height: 10%;
    background-color: blue;
    display:flex;
    align-content:center;
    justify-content:center;
}

#data-container{
    padding: 5px;
    box-sizing: border-box;
    background-color: blueviolet;
}

.btn{
    width:25%;
    height: 100%;
    border: 1px solid black;
    /*margin:auto;*/
    float:left;
    box-sizing: border-box;
    /*margin:0px;*/
    display:flex;
    align-content:center;
    justify-content:center;
}
.btn-text{
    margin:auto;
    /*float:none;*/
    color: #ffffff;
}

<body>
  <div id="main-body">
    <div id="title-container"></div>
    <div id="button-container">
      <div id="home-button" class="btn">
        <p class="btn-txt">Home</p>
      </div>
      <div id="update-button" class="btn">
        <p class="btn-txt">Update</p>
      </div>
      <div id="delete-button" class="btn">
        <p class="btn-txt">Create New</p>
      </div>
      <div id="logout-button" class="btn">
        <p class="btn-txt">Log Out</p>
      </div>
    </div>
    <div id="data-container"></div>
  </div>
</body>

@caramba here the problem is just opposite.on this code it's working fine vertically — Afsal Khan, Jan 31 '18 at 07:05
Possible duplicate of [CSS "margin: 0 auto" not centering](https://stackoverflow.com/questions/35817096/css-margin-0-auto-not-centering) — Ismail Farooq, Jan 31 '18 at 07:12
there is no difference between margin:auto or `margin: 0 auto;` try to add width on `
` tag and check the `margin:0 auto;` remove top bottom margin also nothing else — Ismail Farooq, Jan 31 '18 at 07:15
@ismail i don't think that is a good idea to add a separate width to
element because,if i did not added a width to element
means which takes the whole width of it's parent. — Afsal Khan, Jan 31 '18 at 07:15
[What, exactly, is needed for “margin: 0 auto;” to work?](https://stackoverflow.com/questions/4955122/what-exactly-is-needed-for-margin-0-auto-to-work) — caramba, Jan 31 '18 at 07:16
not the parent the 25% is fine try to give width to `.btn-txt` i.e 40px — Ismail Farooq, Jan 31 '18 at 07:16
sorry i don't understand what you are talking about and why can please explain with help of a snippet — Afsal Khan, Jan 31 '18 at 07:22
@AfsalKhan tl;dr: the width of the p is the whole width of the window. Setting margins to auto doesn't change that. — Mr Lister, Jan 31 '18 at 07:31

score 0 · Answer 1 · answered Jan 31 '18 at 07:07

0

As I know that margin affects to element not content. If you set margin: 0 auto; it will place element to center of parent element.

answered Jan 31 '18 at 07:07

Khoi Ngo Nguyen

164
5

Nilesh Mahajan · Answer 2 · 2018-01-31T08:28:55.907

There are few things you should note here.

content cannot be aligned vertically using margin: auto;
to align content align vertically you need to use some other ways, such as vertical alignment or using flexbox model etc.
if you want to align content horizontally center using margin: auto? then the width of the element should not be more than the content width.
if the content inside the element needs o be horizontally center aligned then simply use text-align: center;

for more reference on how CSS margin works please read the following description.

The margin CSS property sets the margin area on all four sides of an element. It is a shorthand that sets all individual margins at once: margin-top, margin-right, margin-bottom, and margin-left.

for more in detail description: https://developer.mozilla.org/en-US/docs/Web/CSS/margin

Just to solve your problem with your existing code, check out following solution.

CSS

class name changed from .btn-text to .btn-txt

.btn-txt{
  text-align:center;
}

score 0 · Answer 3 · answered Jan 31 '18 at 07:24

checkout this answer https://stackoverflow.com/a/35817140/2724173 you child must have the width to work margin:auto

try to give width to .btn-txt i.e 40px also there is the spelling mistake in your class is btn-txt and your css selector is .btn-text

#main-body{
    width: 100%;
    height: 95%;
    box-sizing: border-box;
    background: yellow;
}

#title-container{
    width:100%;
    height: 10%;
    background: red;
}

#button-container{
    width:100%;
    height: 10%;
    background-color: blue;
}

#data-container{
    padding: 5px;
    box-sizing: border-box;
    background-color: blueviolet;
}

.btn{
    width:25%;
    height: 100%;
    border: 1px solid black;
    /*margin:auto;*/
    float:left;
    box-sizing: border-box;
    /*margin:0px;*/
}
.btn-txt{
    margin:10px auto;
    /*float:none;*/
    color: #ffffff;
    width:40px;
}

<body>
  <div id="main-body">
    <div id="title-container"></div>
    <div id="button-container">
      <div id="home-button" class="btn">
        <p class="btn-txt">Home</p>
      </div>
      <div id="update-button" class="btn">
        <p class="btn-txt">Update</p>
      </div>
      <div id="delete-button" class="btn">
        <p class="btn-txt">Create New</p>
      </div>
      <div id="logout-button" class="btn">
        <p class="btn-txt">Log Out</p>
      </div>
    </div>
    <div id="data-container"></div>
  </div>
</body>

why margin property is not working?

3 Answers3