Question

在div中嵌入嵌入式pdf有点麻烦。

这是我的HTML代码段。

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

这是我的style.css文件中的相关CSS：

#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 ;    
}

据我所知，将margin-left和margin-right设置为auto应该将div中的内容置于post类或<p>标记中。那么为什么.pdf会留在左边？

Answer 1

为<div class="post">提供明确的宽度。

E.g：

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

如果宽度小于父元素的100％，则将左右边距设置为仅自动将起作用。否则，作为块元素，div将扩展到尽可能宽的宽度。另请注意，ALIGN=CENTER已废弃且已弃用，不应使用。

<强> jsFiddle example

Answer 2

内部<div>（post）需要width。否则它将填充100％的周围元素（splash）。

Answer 3

如果您的元素具有100％宽度，则将两个边距设置为自动将不会执行任何操作，因为默认情况下所有div都会执行。如果指定宽度，则剩余水平空间将由左右边距均匀分割。例如：

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

请注意，p上的自动边距可能因为同样的原因而无效;你可以删除那个规范。

将嵌入式pdf置于div中

3 个答案: