Posted on November 19, 2014 by admin

CSS for Align Content to The Middle

I've fought for years to get content perfectly aligned center regardless of browser window size. This code does the trick

The float_center
This is is how I align middle for Div’s inside of a div. The outer div has float_center class enabled. That is this in the style sheet which is used to find the center point of your container div. The float_center

.float_center {
float: right;
position: relative;
left: -50%; /* or right 50% */
text-align: left;
}

The Floater
Now that we have a box we need something to float inside it and that is where the Floater comes in. He makes sure he uses that center point to needle nose the content he is floating around with

.float_center > .floater {
position: relative;
left: 50%;
}

< div class="float_center" >
< div class="floater closebox middle" >

Add content in the middles

< /div >
< /div >

The Magic Float Center Code

This goes in your style sheet
/* The Magic Float Center Code */
.float_center {
float: right;
position: relative;
left: -50%; /* or right 50% */
text-align: left;
}
.float_center > .floater {
position: relative;
left: 50%;
}
.closebox {
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
*left: -1px;
padding:15px;
max-width:700px;
line-height: 1.6em!important;
}
.block-type-content .middle {
text-align:center;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consectetur odio risus, id dictum lorem faucibus at. Proin rhoncus efficitur quam nec porttitor. Pellentesque eget nulla in odio tristique facilisis. Suspendisse volutpat arcu sed tortor auctor, dictum commodo ex aliquet. Proin a interdum enim. Nulla malesuada scelerisque elementum. Cras ultrices elit eget ornare sodales. Praesent…

One of your most important pages on a new or active website is your 404 error page. I found out about mine while tracing links to my site by performing keyword searches in Google. With a WordPress site you get this generic error “Whoops! Page Not Found” with some “, you didn’t do anything wrong.…

This is what Webvisuals.com uses for it’s content layout solution in a responsive tsunami world. The CSS /* experimental */ .grid { @include clearfix; /* margin: 0 -1.5em;*/ } .grid-unit { box-sizing: border-box; display: block; float: left; /* padding: 0 1.5em;*/ width: 100%; background-color:#ccc; border: 3px dotted #333; padding-left:25px; } .layout .grid-unit { width: 20%;…