Everything in my code is working perfectly except for the last paragraph tag. I need to position it in the center of the blue rectangle created by the div with class "defaultButtonStyle." I've tried using margin-top in the CSS without success. Any other suggestions?
<style>
body {background-color: #ebf0f3;}
.mainPicture img {height: 400px; width: 600px; }
#gallery {position: relative;}
#gallery ul {list-style-type: none; width: 236px; margin-left: -33px; margin-top: -15px;}
#gallery li {display: inline; float: left; padding: 0px;}
#gallery img {border-style: solid: 10px; border-color: #ebf0f3;}
#gallery a {text-decoration: none; font-style: none; color: #333;}
.popOut {cursor: default; list-style: none;}
.popOut a {cursor: default;}
.popOut a .preview {display: none;}
.popOut a:hover .preview {display: block; position: absolute; top: -20px; left: -45px; z-index: 1;}
.popOut img {background: #ebf0f3; border-color: #ebf0f3; border-style: solid; border-width: 2px; color: inherit; vertical-align: center; width: 100px; height: 67px;}
.popOut li {background-color: none; border-color: #ebf0f3; border-style: solid; border-width: 0px; color: inherit; display: inline; float: left; margin: 3px; padding: 0px; position: relative;}
.popOut .preview {border-color: #000; width: 200px; height: 134px;}
.popOut p {text-align: center;}
.defaultButtonStyle {background: #ebf0f3; border-color: #ebf0f3; border-style: solid; border-width: 1px; color: inherit; vertical-align: top; width: 212px; height: 38px; margin-top: -43px; text-align: center;}
.defaultButtonStyle p .defaultImageText {top-margin: 100px;}
.popOut .center {align: center;}
#rightcol {margin-left: 237px;}
#rightcol .fixThisHeight {margin-top: 18px;}
</style>
<div id="container">
<div class="mainPicture">
<img alt="" id="JudgeBench" name="JudgeBench" src="http://PATH/files/pictures/JudgeBench.jpg" />
</div>
<div id="gallery">
<ul class="popOut">
<li>
<a href="http://PATH/files/pictures/PodiumPlain3.html" target="AdditionalInfo" onClick="document.JudgeBench.src='http://PATH/files/pictures/PodiumPlain.jpg'">
<img alt="PodiumPlain" src="http://PATH/files/pictures/PodiumPlain.jpg" /><img alt="PodiumPlain" class="preview" src="http://PATH/files/pictures/PodiumPlain.jpg" />
</a>
</li>
// More list items follow...
</ul>
<div id="rightcol">
<iframe width="360px" height="319px" class="fixThisHeight" id="AdditionalInfo" name="AdditionalInfo" src="http://PATH/files/pictures/JudgeBench2.html" title="Information About Courtroom Technology"></iframe>
</div>
<div id="defaultButtonDiv" class="defaultButtonStyle">
<a href="http://PATH/files/pictures/JudgeBench2.html" onClick="document.JudgeBench.src='http://PATH/files/pictures/JudgeBench.jpg'" target="AdditionalInfo">
<img alt="Default Image" class="DefaultImage" "http://PATH/files/pictures/DefaultImageFinal.jpg" />
<div id="MoveTheTextAround" class="MoveTheTextAround">
<p class="defaultImageText">Default Image</p>
</div>
</a>
</div>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>Just some text</p>