php - 试图将我的嵌入照片库(来自 tinymce 编辑器)对齐在我的模态 div 的中心

Question

我使用 tinymce 将新闻插入网站。

我在 tinymce html 编辑器中插入了一个与相册相对应的嵌入代码。 (我正在为我的图片库使用在线照片共享服务。)

这个服务给了我一个“嵌入代码”，当我插入我的 tinymce html 编辑器时，我在我的 html 中得到了这个:(我的嵌入标签变成了一个对象标签)

<p>
<object style="height: 350px; width: 460px;" width="460" height="350" 
align="middle" 
data="http://flash.picturetrail.com/pflicks/3/spflick.swf" 
type="application/x-shockwave-flash">  
<param name="src" value="http://flash.picturetrail.com/pflicks/3/spflick.swf" />
<param name="quality" value="high" /><param name="flashvars"    value="ql=2&amp;
src1=http://pic20.picturetrail.com:80/VOL1566/13680586/flicks/1/9035174" />
<param name="wmode" value="transparent" /><param name="allowscriptaccess" value="sameDomain" />
</object>
</p>

现在我试图将我的照片库对齐到我的模态 div 的中心，但我没有成功这样做。

因为我还需要 float :离开我的照片库，因为如果我的段落文本太小，我的照片库就会粘住我的段落文本，我不希望这样。

我希望在 .img 类的新闻图片下方始终留出 20 像素的边距。

你知道我该如何解决这个问题吗？

这是我的完整示例:http://jsfiddle.net/65z7w3z3/

这就是我在网站中显示文本区域内容的方式；

echo '<p>'.$result_read_textarea['content_textarea'].'</p>';

我的 Html:

<div class="modal">
    <h2>Title of my first news</h2>
    <span id="date">15/08/2014</span><br />
    <img class="img" src=""/>
    <p>my first paragraph</p>
   <embed src="http://flash.picturetrail.com/pflicks/3/spflick.swf" 
   quality="high" FlashVars="ql=2&src1=http://pic20.picturetrail.com:80/VOL1566/13680586/flicks/1/9035174" wmode="transparent" bgcolor="" width="460" height="350" name="Acrobat Cube" align="middle" allowScriptAccess="sameDomain" style="height:350px;width:460px" type="application/x-shockwave-flash">
   </embed>

    <div id="pdfs">
        <h3>Links:</h3>
        <ul class="links"> 
            <li> <a href="'">Link 1</a></li>
            <li> <a href="'">Link 2</a></li>
            <li> <a href="'">Link 3</a></li>
        </ul>
    </div>
    <span class="close">Back</span>
</div>

Answer 1

这是因为元素是 float 的。去掉浮子。还可以添加一个清晰的 div 来帮助您进行布局。清晰的 div 将阻止它与您的其他元素一起 float 。

演示 http://jsfiddle.net/david321312312231/65z7w3z3/1/

CSS 更新

.clearfix {
    clear: both;
    width: 100%;
    display: block;
}

#pdfs, embed
{
    margin:20px auto;
    clear:both;
    width:100%;
}

HTML 更新

// html code

<div class="clearfix"></div>

<embed // more html code