| How to centre align the box
|
paparazzo
msg:4423633 | 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
msg:4423711 | 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
msg:4423729 | 5:55 pm on Mar 1, 2012 (gmt 0) |
Nope, it will centre align the text only, but not the box.
|
Marshall
msg:4423768 | 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
msg:4423774 | 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
msg:4423825 | 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
msg:4423833 | 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
msg:4423847 | 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.
|
|
|
