Question

Having a bit of trouble centering an embedded pdf within 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 ;    
}

To my knowledge, setting the margin-left and margin-right to auto should center what’s in the div in either the post class or the <p> tag. So why is the .pdf is staying on the left?

Answer 1

Give your <div class="post"> an explicit width.

E.g.:

.post {
width: 820px;
margin-left: auto ;
margin-right: auto ;
}

Setting the left and right margins to auto only will work if the width is less than 100% of the parent element. Otherwise, being a block element, the div will expand to the fullest possible width. Also note that ALIGN=CENTER is old and deprecated and shouldn’t be used.

jsFiddle example