I'm trying to make div to auto adjust horizontally in the middle by using margin

Question

I looked through example at stack overflow whose problem where similar to mine but without success. I do not know what am I doing that is wrong but the div is not going to horizontally middle well so far it only works for certain resolution screen but if I load it to different screen its not in the middle so i use margin: 0 auto; but still didn't work.

HTML

<div class="margin">
    <div class="BoxContainer">
        <a href="https://medium.com/@sudeep_shahi"><div class="box"><img src="img/medium.png" alt="medium" style="width:100%;height:100%;"></div></a>
        <a href="www.linkedin.com/in/sudeep-shahi-92375010a"><div class="box"><img src="img/linkdin.png" alt="linkdin" style="width:100%;height:100%;"></div></a>
        <a href="https://www.instagram.com/westkinz/?hl=en"><div class="box"><img class="effect" src="img/instagram.png" alt="Itragram" style="width:100%;height:100%;"></div></a>
    </div>          
</div>

CSS

.margin{
    margin-left: auto;
    margin-right:auto;
    margin-bottom: 5px;
    background-color: #EBEBEB;
}
.boxContainer {
    display:inline-block;
    border:thick dotted #060;
    margin: 0px auto 10px auto;
    text-align: left;
    background-color:#EBEBEB;
}
.box {
    width: 300px;
    height: 300px;
    background-color:#EBEBEB;
    display: inline-block;
}

.box :hover{
    border-radius: 50%;
    transform: rotate(360deg);
}

Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — Asons, Jun 26 '16 at 12:24

score 0 · Accepted Answer · answered Jun 26 '16 at 12:28

0

To center a <div> using margin: auto you'll need to set the <div>'s width manually, otherwise the default display: block will take 100% of the available space, and you will not be able to center the element.

Give your .margin class width: 300px and it will be centered.

answered Jun 26 '16 at 12:28

Narxx

7,929
5
26
34

i see in my case my width would be 909px so all the three box are inline in one row. – WESTKINz Jun 26 '16 at 14:57

score 0 · Answer 2 · answered Jun 26 '16 at 12:53

to my understanding you are trying to do something like this

<div class="centered">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

What you have done wrong is you have text-align set to left in the parent node which is followed by all childrens

.centered{
    text-align: center;
}
.box{
    display: inline-block;
    height:100px;
    width: 100px;
    padding: 3px;
    border: 1px solid black;
}

Hope this is the answer you were looking for

I'm trying to make div to auto adjust horizontally in the middle by using margin

2 Answers2