CODEWITHSUNDEEP
htmlcss
Bhawna
Bhawna

Reputation: 705

Not able to make div center align using display:table

I am using display table and table cell verticle-align middle to make div center align. but center div is not positioned center.

Fiddle: Here

Css: 

.landing-right {
    position: relative;
    padding: 50px 0px;
    float: left;
    display: table;
    width: 365px;
    height: 100%;
    margin-left: -70px;
}
.landing-img {
    height: 420px;
    position: relative;
    float: left;
    width: 100%;
    background-repeat: no-repeat;
    border: 15px solid #fff;
    display: table-cell;
    vertical-align: middle;
}

HTML: 

<div class="landing-right">
            <div class="landing-img" style="background-image: url(&quot;https://cdn.filestackcontent.com/Cvj2tN3S7ikTu981vJVp&quot;);">                
</div>

Upvotes: 1

Views: 76

Answers (4)

Vikas Meena
Vikas Meena

Reputation: 342

In your css class landing-right, you need to make changes and it should be like this- 

.landing-right {
    position: relative;
    padding: 50px 0px;
    display: table;
    width: 365px;
    height: 100%;
    margin-left: auto;
}

By keeping float:left, you are making your div stick to the left of the screen and on the top of that with margin-left: -70px; will never let your div come in middle, keep it to auto so div can have the scope with the margin and with no floating of left div will go directly in middle of the screen.

Upvotes: 0

Learner
Learner

Reputation: 121

Try with this code snippet:

.landing-right {
    position: relative;
    display: table;
    width: 365px;
    margin: 0 auto;
 }

Upvotes: 0

shaochuancs
shaochuancs

Reputation: 16246

There are several problems with .landing-right:

  • It has float: left. If it needs to be horizontally centered, this CSS rule should not be defined.
  • It has margin-left: -70px which makes it offset to left for 70px. It is not necessary, and should be removed if the element needs to be horizontally centered.
  • No CSS rule is defined to horizontally center the element, the easiest way to implement it is using margin: 0 auto.

For vertical center, the code works well.

Here is a code snippet which makes the image centered horizontally and vertically for your case:

.landing-main {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #fefefe;
}
.landing-right {
    position: relative;
    padding: 50px 0px;
    display: table;
    width: 365px;
    height: 100%;
    margin: 0 auto;
}
.landing-img {
    height: 420px;
    position: relative;
    float: left;
    width: 100%;
    background-repeat: no-repeat;
    border: 15px solid #fff;
    display: table-cell;
    vertical-align: middle;
}
.landing-inner {
    width: 100%;
    box-shadow: 0 2px 9px 2px rgba(0,0,0,0.4);
    padding: 40px 0px;
    min-height: 100vh;
    background: #f8f8f8;
}
<div class="landing-main">

<div class="landing-inner">
<div class="landing-right">
            <div class="landing-img" style="background-image: url(&quot;https://cdn.filestackcontent.com/Cvj2tN3S7ikTu981vJVp&quot;);">
            
            </div>
        </div>
        </div></div>

Upvotes: 2

Rafe
Rafe

Reputation: 429

you should use margin: auto; for the static width div and remove float: left;. It will center the inner one horizontally. But vertical center align is much harder, you should use something like this one.

Edit: you did not mentioned that which div was needed to be centered. It was the solution for middle alignment of .landing-right

Upvotes: 0

Related Questions