Question

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

我在tinymce html编辑器中插入了与照片库相对应的嵌入代码。（我在我的图片库中使用在线照片共享服务。）

这项服务给了我一个＆＃34;嵌入代码＆＃34;当我在我的tinymce html编辑器中插入时，我在我的html中得到了这个:(我的embed标签变成了一个对象标签）

<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的中心对齐，但我没有成功这样做。

因为我还需要漂浮：离开我的照片库，因为如果我的段落文字太小，我的照相馆就会贴上我的段落文字，我不想要那样。

我希望始终比我的新闻图像低出20px的上限。

你知道我怎么解决这个问题？

这是我的小例子：http://jsfiddle.net/65z7w3z3/

这是我在网站上显示我的textarea内容的方式;

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

这是因为浮动元素。移除浮子。还添加一个清晰的div来帮助您的布局。明确的div将阻止它与你的其他元素一起浮动。

DEMO 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

Answer 2

您需要在embed标记周围创建一个包装div，并将其与中心对齐：

<div class="wrapper" style="width: 460px; margin: 0px auto;">...</div>

http://jsfiddle.net/65z7w3z3/2/

Answer 3

在图库周围创建标记，然后设置样式。

HTML图库部分：

<div class="photogallery">
  <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>

照片库的CSS：

.photogallery {
    width: 400px;
    margin: auto;
}

试图在我的模态div的中心对齐我的嵌入式照片库（来自tinymce编辑器）

3 个答案: