How to centre align the box

Forum Moderators: not2easy

Message Too Old, No Replies

How to centre align the box

paparazzo

3:15 pm on Mar 1, 2012 (gmt 0)

}

.box1{
width: 800px;
margin: 40px;
min-height: 200px;
position:absolute;
display: inline-block;
background: -webkit-gradient(linear, 0% 20%, 0% 1000%, from(#fff), to(#fff), color-stop(.1,#f3f3f3));
border: 1px solid #ccc;
-webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
-webkit-border-bottom-right-radius: 6px 50px;
}

.box1:before{
content: '';
width: 50px;
height: 100px;
position:absolute;
bottom:0; right:0;
-webkit-box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.1);
z-index:-1;
-webkit-transform: translate(-35px,-40px)
skew(0deg,30deg)
rotate(-25deg);
}

.box1:after{
content: '';
width: 100px;
height: 100px;
top:0; left:0;
position:absolute;
display: inline-block;
z-index:-1;
-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg)
translate(20px,25px)
skew(20deg);

rocknbil

5:26 pm on Mar 1, 2012 (gmt 0)

Like this?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<style type="text/css">
#box {
border:1px solid #000;
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="box"> <ahem> </div>
</body>
</html>

paparazzo

5:55 pm on Mar 1, 2012 (gmt 0)

Nope, it will centre align the text only, but not the box.

Marshall

6:43 pm on Mar 1, 2012 (gmt 0)

Are you trying to center dead center in the window or merely center left to right?

Marshall

paparazzo

7:01 pm on Mar 1, 2012 (gmt 0)

OK, there is a box and the text inside the box. The text should be left align, but the box should be centre align (in the middle of the page).

Marshall

8:53 pm on Mar 1, 2012 (gmt 0)

Usually, if you want to center align an element, the following works:

margin: 0 auto;
text-align: left; /*does not hurt to add */
or
margin: 40 auto /*assuming it is .box1 */
text-align: left;

Your other option is wrap your .box1 in a <div> and do say
#boxwrap {
margin: 0 auto;
padding: 0;
width: whatever is appropriate to contain what is inside;
height: same note as above
text-align: left;

But I assure you that any element with a defined width and the margin set to 0 and auto will align center in the window.

Marshall

Paul_o_b

9:18 pm on Mar 1, 2012 (gmt 0)

Hi,

If the elements needs to be position:absolute then just add right:0;left:0;margin:auto to it and it will center in IE8+.


.box1{
width: 800px;
min-height: 200px;
position:absolute;
right:0;
left:0;
margin:0 auto;
background:red;
}

In your code the display:inline-block is redundant and should be removed as position absolute over-rides it.

If you want it as display:inline-block then remove the position:absolute but then to center it you will need text-align:center on a parent div to center an inline-block element.

If you don't need either of those then just set it to display:block (the default and no need to say it) and use margin:auto as already mentioned above. You will also need to add position:relative as a stacking context for the before and after elements.

paparazzo

9:37 pm on Mar 1, 2012 (gmt 0)

Thanks guys, you're awesome. Paul_o_b, "right:0;left:0;margin:auto" did the magic.