将 iframe 与 <p> 对齐答案

【问题标题】：Align an iframe with a <p>将 iframe 与 <p> 对齐
【发布时间】：2014-03-07 18:54:52
【问题描述】：

我正在使用 twitter 小部件，并且我想将它与我的文本对齐。不幸的是，我无法让它发挥作用。

这是我整理的一个 jsfiddle：http://jsfiddle.net/9bB52/

HTML：

<div id="share">
<div class="wrapper clearfix">
<p>
<b>My text here!</b>
</p>
<div class="fb-like" data-layout="button_count" data-send="false" data-show-faces="false" data-width="80"/>
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" src="http://" class="twitter-share-button twitter-tweet-button twitter-count-horizontal" title="Twitter Tweet Button" data-twttr-rendered="true" style="width: 107px; height: 20px;"/>
<p/>
</div>
</div>

CSS：

#share {
    background: blue;
    padding: 5px 0;
    width: 100%;
    text-align: center;
    margin-bottom: 120px }

#share .wrapper {
    width: 650px;
    width: 100%;
    text-align: center; }

#share p {;
    margin-top: 2px;
    margin-right: 10px; }

#share p b {
    color: #fff; }  

#share .facebook-share, #share .twitter-share {
    float: left;
    width: 100px;
    vertical-align: top }

有人知道如何解决这个问题吗？

最好的

【问题讨论】：

让你的#share p 向左浮动，它将放在一行上。

标签： html css iframe widget vertical-alignment

【解决方案1】：

看看这个 - 希望它对你有用！

<div id="share">
<div class="wrapper clearfix">
<p>
<div style="width:250px;margin-left:auto;margin-right:auto;">    
<div style="width:120px;float:left;"><b>My text here!</b></div>
<div style="float:left" class="fb-like" data-layout="button_count" data-send="false"    data-show-faces="false" data-width="80"/>
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true"    src="http://platform.twitter.com/widgets/tweet_button.1393899192.html#_=1394188375300&count=horizontal&id=twitter-widget-0&lang=en&original_referer=http%3A%2F%2Flocalhost%3A3000%2F&size=m&text=Be%20part%20of%20the %20Startup%20Solidarity%20Movement%20and%20get%20the%20Startup%20Pack%20for%20Marketers%20worth%20more%20than%20%245.000%20for%20free!&url=http%3A%2F%2Flocalhost%3A3000%2F"  class="twitter-share-button twitter-tweet-button twitter-count-horizontal" title="Twitter  Tweet Button" data-twttr-rendered="true" style="width: 107px; height: 20px;"/>
<p/>
</div>
</div>
</div>


#share {
    background: blue;
    padding: 5px 0;
    width: 100%;
    text-align: center;
    height:50px;
    margin-bottom: 60px }

#share .wrapper {
    width: 650px;
    width: 100%;
    text-align: center; }

#share p {;
    margin-top: 2px;
    margin-right: 10px; }

#share p b {
    color: #fff; }  

#share .facebook-share, #share .twitter-share {
    float: left;
    width: 100px;
    vertical-align: top }

看看这个：http://jsfiddle.net/9bB52/

【讨论】：

【解决方案2】：

这就是你要找的吗？

    #share {
    background: blue;
    padding: 5px 0;
    height:30px;
    width: 100%;
    text-align: center;
    margin-bottom: 120px }

#share .wrapper {
    width: 650px;
    width: 100%;
    text-align: center; }
p {
    position:relative;
    float:left; 
    margin-top:2px;
    margin-right:10px;
    margin-left:120px;
}

#twitter-widget-0 {
    float:left;
    text-align:center;
}

DEMO

【讨论】：

谢谢，但这里的文字是左对齐的。可以居中吗？
使用margin调整位置或将文本和按钮包裹在div中，并赋予margin：0 auto使其成为容器的中心。