Total members 11889 |It is currently Fri Mar 29, 2024 6:17 am Login / Join Codemiles

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka





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>




_________________
M. S. Rakha, Ph.D.
Queen's University
Canada


Author:
Mastermind
User avatar Posts: 2715
Have thanks: 74 time
Post new topic Reply to topic  [ 1 post ] 

  Related Posts  to : Move content to center of the page
 Cant change the culture or UICulture of the content page     -  
 Center logo     -  
 Bounding Box to Center Text by php     -  
 Change cursor to move     -  
 invalid argument on IE with script to center objects     -  
 move movie clips in Macromedia flash     -  
 make an object grow/move on Macromedia Flash     -  
 Image Scroller-scrollbar-LINE_UP,LINE_DOWN-PAGE-UP-PAGE-DOWN     -  
 Move image in front of a background image     -  
 Hide the content of the div     -  



Topic Tags

JQuery Content






Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com