Move content to center of the page

DrRakha

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>

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka

Move content to center of the page

Topic Tags