2016-09-08 2 views
0

Мне нужно глобальное решение, чтобы сосредоточиться на кнопке facebook iframe, которая может иметь разные URL-адреса и разные локали (и языки - в моем случае 40+). Таким образом, кнопка будет иметь разную ширину в конце.Как сосредоточиться на facebook iframe like button

В соответствии с этим я удалил атрибут width и добавил параметр locale. Iframe получает ширину 300px и его невозможно центрировать.

Смотрите проблемы в этом примере:

.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>

Главное здесь: Я должен использовать IFrame soultion из Facebook кнопки, как, не JS SDK версии.

+0

Другое решение: 'iframe {margin: auto; display: block;} ' – UncaughtTypeError

+0

@UncaughtTypeError это не поможет здесь после моего редактирования. – herrh

+1

Те же политики домена помешают вам создавать стиль в iframe, который отображается с другого сервера. http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe – UncaughtTypeError

ответ

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

Добавить text-align:center в ваш содержащий div.

+0

Это поможет, если вы используете инспектора свойств в браузере :) –

+0

редактирование делает мою проблему яснее. Какие-либо предложения? – herrh

+0

Могу ли я узнать, почему это было отклонено как неприемлемый ответ? –

Смежные вопросы