Hi
I want to embed kickstarter widget in article. I wonder how to center this widget? Now is align to left, when I use style “text-align: center” this does’t work.
Excemple of widget:
<iframe src=”https://www.kickstarter.com/projects/338597945/fleet-commander-genesis/widget/card.html?v=2″ width=”220″ height=”420″ frameborder=”0″ scrolling=”no”></iframe>
Hello,
You will need to wrapt the iframe in a bit of html before you can align it. Please insert your iframe like so:
<div id="all">
<div class="sub">
<iframe src="https://www.kickstarter.com/projects/338597945/fleet-commander-genesis/widget/card.html?v=2" width="220" height="420" frameborder="0" scrolling="no">></iframe></div>
</div>And then use this custom css code:
#all{
width:100%;
float:left;
text-align:center;
}
div.sub, iframe {
margin: 0 auto;
}Thank you!
Hi. Thank for your help.
I have smiliar problem but with instagram photos:
Example code:
<div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div><p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Zdjęcie zamieszczone przez użytkownika Przystanek Planszówka (@przystanekplanszowka) <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2015-06-11T18:53:01+00:00">11 Cze, 2015 o 11:53 PDT</time></p></div>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>
How to center this photo?
Hi,
Unfortunately the widget does not work on my side so I cannot provide a solution. Please use http://www.pastebin.com to insert the code as the forum tends to corrupt long pieces of code.
Thank you
Hi
ok. one more time:)
<blockquote><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:49.3981481481% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div><p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/p/BABAZykKz8I/" target="_blank">Zdjęcie zamieszczone przez użytkownika Przystanek Planszówka (@przystanekplanszowka)</a> <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2016-01-01T23:59:00+00:00">1 Sty, 2016 o 3:59 PST</time></p></div></blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>Ok, this time it showed up but it is centered on my end: http://screencast.com/t/KUF1jkov
Please provide a link to your website so i can inspect it and see how it is displayed.
Thank you!
Hi.
Example on my website: instagram problem
Hello,
Easier when you can see what you are doing.
Please try this css:
.sub iframe{
margin-left:auto!important;
margin-right:auto!important;
}
Thanks.
Thanks 🙂
