Move content to center of the page

Thu Jan 17, 2013 9:58 pm

Move your content div or paragraph to the center of the browser, Vertical and Horizontal Align.
javascript code

<html>
<head>
<title>Move content to center of the page</title>
  
<!--
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
 Note you can download the JQuery package instead of using Google version. -->
<script src="jquery-1.8.3.js"></script>
 <script type="text/javascript">
(function ($) {
$.fn.TopToCenter = function() {
return this.each(function(i){
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("top", "50%");
$(this).css("position", "absolute");
$(this).css("margin-top", "-" + mt + "px");
});
};
})(jQuery);
 
(function ($) {
$.fn.LeftToCenter = function() {
return this.each(function(i){
var w = $(this).width();
var ow = $(this).outerWidth();
var ml = (w + (ow - w)) / 2;
$(this).css("left", "50%");
$(this).css("position", "absolute");
$(this).css("margin-left", "-" + ml + "px");

});
};
})(jQuery);
 
$(document).ready(function() {
$("#myDiv").TopToCenter();
$("#myDiv").LeftToCenter();
});
</script>
 
<style type="text/css">
html { background: #fafafa; }
 
#myDiv
{
background: #0505C0;
border: 10px solid #11e;
padding: 10px;
color: Yellow;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 25px;
text-align: justify;
}
 
#myDiv { width: 500px; }
</style>
 
</head>
 
<body>
 
<div id="myDiv">
 Add your text here. Add your text here.Add your 
 text here.Add your text here.Add your text here.
 Add your text here.!doctypeAdd your text here.
 Add your text here.Add your text here.Add your text here.
</div>
 
</body>
</html>

Move content to center of the page

Move content to center of the page

Topic Tags