How come one Code is Smaller than the Other?

JavaScript
1

What’s causing the 1st code to shrink? And how can I prevent it from shrinking?

1st Code Centered in the Middle: Smaller


html,body {
height:100%;
background: #000000;
padding:0;
margin:0;
}
.outer {
display:table;
height:100%;
margin:0 auto; 
}
.tcell {
display:table-cell;
vertical-align:middle;
}

    <div class='outer'>
      <div class='tcell'>
      
<blockquote class="imgur-embed-pub" lang="en" data-id="a/DKynR" data-context="false"><a href="//imgur.com/a/DKynR">View post on imgur.com</a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>

     </div>
    </div>

2nd Code By itself ‘Larger’


<blockquote class="imgur-embed-pub" lang="en" data-id="a/DKynR" data-context="false"><a href="//imgur.com/a/DKynR">View post on imgur.com</a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>

https://i.imgur.com/WTHvUm5.png

2

It looks to be the display:table and table-cell parts that’s responsible for that.

3

Is there any way I can set a fixed height and width of the javascript?

4

I think you may have better luck styling the added iframe

var host=window.location.host
 ,source="s.imgur.com/min/embed-controller.js";
if(!window.imgurEmbed){
window.imgurEmbed={tasks:0};
var script=document.createElement("script");
script.type="text/javascript"
 ,script.async=!0
 ,script.src="//"+source
 ,script.charset="utf-8"
 ,document.getElementsByTagName("head")[0].appendChild(script)
}
window.imgurEmbed.createIframe?imgurEmbed.createIframe():imgurEmbed.tasks++;
//# sourceMappingURL=embed.js.map
1 Like
5

I have no idea how to implement that, can you show me in js fiddle?

6

Tables are shrink to fit by default so you probably need to have a width on the table.

.outer {
display:table;
height:100%;
width:100%;
margin:0 auto; 
}
1 Like
7

I just did that but now it’s not centered in the middle.

It pushes the javascript all the way over to the left.

See:

9

How do you think you might centre an inline element such as an inline frame (iframe) ?

How would you center text?

Keep thinking for yourself :slight_smile:

.tcell {
display:table-cell;
vertical-align:middle;
text-align:center;
}
1 Like
10

Is there a way I can set a specific height and width of the javascript? Is that possible?

11

You can probably size the iframe like this:

.outer #imgur-embed-iframe-pub-a-DKynR {width:300px!important;height:300pximportant;}

1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.