ボタンのようにfacebook iframeを中央に揃える方法

Question

URLのような異なるロケール（そして言語 - 私の場合は40+）を持つことができるボタンのようなfacebook iframeを中央に置くためのグローバルな解決策が必要です。そのため、ボタンの端にはさまざまな幅があります。

それによると、width属性を削除し、ロケールパラメータを追加しました。 iframeの幅が300ピクセルになり、中心に配置できなくなります。

は、この例では問題を参照してください。重要

.mydiv { 
 
    padding: 30px 0; 
 
    background: red; 
 
    text-align: center; 
 
} 
 
.mydiv span { 
 
    font-family: sans-serif; 
 
    text-decoration: underline; 
 
    display: block; 
 
    margin-bottom: 10px; 
 
} 
 
.mydiv iframe { 
 
    background: green; 
 
}

<div class="mydiv"> 
 
    <span>locale en_US</span> 
 
    <iframe src="https://www.facebook.com/plugins/like.php?locale=en_US&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&layout=button_count&action=like&size=small&show_faces=true&share=false&height=21&appId=848263035268773" height="21" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe> 
 

 
    <span>locale de_DE</span> 
 
    <iframe src="https://www.facebook.com/plugins/like.php?locale=de_DE&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&layout=button_count&action=like&size=small&show_faces=true&share=false&height=21&appId=848263035268773" height="21" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe> 
 
</div>

をここに：私はFacebookのボタンのような、ないのJS SDKバージョンのインラインフレームsoultionを使用する必要があります。

Answer 1

.mydiv { 
    padding: 30px 0; 
    background: red; 
    text-align:center; 
} 

text-align:centerをあなたの含むdivに追加します。