homepage Welcome to WebmasterWorld Guest from 54.196.63.93
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
How to centre align the box
paparazzo



 
Msg#: 4423631 posted 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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4423631 posted 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"> &lt;ahem&gt; </div>
</body>
</html>

paparazzo



 
Msg#: 4423631 posted 5:55 pm on Mar 1, 2012 (gmt 0)

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

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4423631 posted 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#: 4423631 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4423631 posted 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

10+ Year Member



 
Msg#: 4423631 posted 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#: 4423631 posted 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved