OK, I looked around here and could not find what I thought would help.

I need to center the text in each div. I have tried but no centering.

Here is my template code:
Code:
<!DOCTYPE html>
<html lang="en" >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=9"/>	
		<title>
			New SACCC Home Page Design
		</title>
		<style type="text/css">
		@charset "utf-8";
		/* CSS Document */		
		
		#wrapper
		{
			width: 95%;
			margin: 0 auto;
			margin-top: 20px;
			display: table;
			border: 5px red solid; 
		}
		.heading
		{
			margin: 0 auto;
			width: 100%;
			height: 160px;
		}
		
		#leftPic
		{
			clear: both;
			float: left;
			padding: 5px 10px;
			width: 150px;
			height: 150px;
			overflow:hidden;			
			border: 2px green dotted;
		}
		
		#bodyLeftNav
		{
			clear: both;
			float: left;
			padding: 5px 10px;
			width: 150px;			
				overflow:hidden;
			border: 2px olive solid;
		}
		
		#midDescription
		{
			float: left;
			height: 155px;
			margin-left: auto;
			margin-right: auto;
			padding: 5px 10px;			
		}
		
		#bodyCenter
		{
			float:left;
			display: block;
			margin-left: auto;
			margin-right: auto;
			padding: 5px 10px;			
			     text-align:center;
			border: 2px yellow solid;
		}
		
		#rightPic
		{
			float: right;		
			width: 190px;
			height: 150px;
			padding: 5px 10px;			
			border: 2px black solid;
		}
		
		#rightPic p
		{
			padding: 0;
			margin: 0;
			margin-top: -5px;
			font-size: 1.2em;
			color: #FF4500;
		}
		
		#bodyOptionalRightColumn
		{
			float: right;		
			width: 155px;			
			padding: 5px 10px;			
		}
		
		.webBody
		{
			float: clear;
			border: 2px solid orange;
		}
		
		.pageFooter 
		{
		   position:absolute;
		   bottom:0;
		   width:95%;
		   height:60px;   /* Height of the footer */
		   background:#6cf;
		}
		</style>
	</head>

	<body>
		<div id = "wrapper">
			<div class="heading">
				<div id = "leftPic">
					This is the left picture area
				</div>
				
				<div id = "midDescription">
					<p style="text-align: center;" >this is the description area </p>
				</div>
				<div id = "rightPic">
					Thi is the right picture area
				</div>
			</div>
			<div class="webBody">
				<div id="bodyLeftNav">
					this is nav section
				</div>
				<div id="bodyCenter">
				this is the web body				
				</div>
				<div id="bodyOptionalRightColumn">
				this is the right section
				</div>
			</div>
			
			<div class = "pageFooter">
				this is the footer
			</div>
		</div>
		
	</body>
</html>
Thanks
E