CODEWITHSUNDEEP
css
user1410747
user1410747

Reputation: 99

Centering embedded pdf in a div

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?

Upvotes: 2

Views: 11087

Answers (3)

j08691
j08691

Reputation: 207861

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

Upvotes: 2

KatieK
KatieK

Reputation: 13843

Setting both side margins to auto won't do anything if your element has 100% width, as all divs do by default. If you specify a width, then the remaining horizontal space will be evenly split by the left and right margins. Example:

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

Note that the auto margins on your p probably aren't working for the same reason; you could probably remove that specification.

Upvotes: 1

Dennis Traub
Dennis Traub

Reputation: 51634

The inner <div> (post) needs a width. Otherwise it will fill 100% of the surrounding element (splash).

Upvotes: 1

Related Questions