1

在 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 应该将post类或<p>标签中的 div 中的内容居中。那么为什么 .pdf 留在左边呢？

4

3 回答 3

1

给你<div class="post">一个明确的宽度。

例如：

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

仅当宽度小于父元素的 100% 时，将左右边距设置为 auto 才有效。否则，作为块元素， div 将扩展到最大可能的宽度。另请注意，它ALIGN=CENTER已过时且已弃用，不应使用。

jsFiddle 示例

于 2012-11-15T21:50:49.097 回答
1

内部<div>( post) 需要一个width. 否则它将填充 100% 的周围元素 ( splash)。

于 2012-11-15T21:58:17.610 回答
1

如果您的元素具有 100% 的宽度，则将两侧边距设置为 auto 不会做任何事情，就像所有divs 默认情况下所做的那样。如果指定宽度，则剩余的水平空间将被左右边距平均分割。例子：

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

请注意，p出于同样的原因，您的自动边距可能无法正常工作；您可能会删除该规范。

于 2012-11-15T21:59:10.883 回答