CSS for Align Content to The Middle

Posted on November 19, 2014 by 4accountadmin

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;
}