Centering embedded pdf file in a div

 This is my HTML code snippet.

<div id="splash">
<div class="post">
<h2>Heading </h2>
<p><embed src="images/dop.pdf" ALIGN=CENTER width="820" height="375"></p>
</div>
</div>

Here's the relevant CSS from my style.css file:

#splash {
padding: 40px;
position: relative;
background: #FFF;
margin: 20px 0 0 0;
height: 300px;
width: 1100px;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
}
.post {

margin-left: auto ;
margin-right: auto ;
}

p {
margin-bottom: 1.75em;
margin-left: auto ;
margin-right: auto ;
}

#splash {
padding: 40px;
position: relative;
background: #FFF;
margin: 20px 0 0 0;
height: 300px;
width: 1100px;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
}
.post {
margin-left: auto ;
margin-right: auto ;
}
p {
margin-bottom: 1.75em;
margin-left: auto ;
margin-right: auto ;
}

Setting the margin-left and margin-right to auto, in either the post-class or the p> tag, should center what's in the div. 

Post a Comment

Previous Post Next Post