How to get the advertisement centered?

[Koning Voetbal]

Hello,

I'm working on an app with some advertisement in it.

How can I get this advertisement in the middle of the screen?

I have already in the CSS:

code
[name=advertentie] {
position: fixed;
bottom: 55px;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-web-box-sizing: border-box;
margin: 4px auto !important;
}

.advertisement {
margin-left: auto;
margin-right: auto;
}
/code

And I run into another question: The fixed width of this image is 234px.
I think that if the screen is smaller than 234px, the image will not show entirely.

Is there a solution to make the advertisement allways be 100% width and that the height will adjust?

The code of the image is:

code
<iframe style="overflow: hidden;" src="http:&#47;&#47;f&#46;ds1&#46;nl/?&x=234&y=60&ai=00000&an=&wi=000000&si=0000&li=0000000&ws=" width="234" height="60" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" border="0"></iframe>
/code

Kind regards,

Arie

[Serhii Kulibaba]

Hello,

Please look this nice tutorial: https://css-tricks.com/centering-css-...

[Koning Voetbal]

OK, nice article!

But unfortually it still isn't working for me.

I know an iframe is an inline element so normally a good solution is to place this inline element in a surrounding div, see https://myprogressivelearning.wordpre...

I have added the div:

code
<div class="advertisement_block"><iframe style="overflow: hidden;" src="http:&#47;&#47;f&#46;ds1&#46;nl/?&x=234&y=60&ai=40734&an=&wi=237631&si=1474&li=1219267&ws=" width="234" height="60" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" border="0"></iframe><>
</code

And the CSS looks like this:

<code>
&#46;advertisement_block {
width: 100%;
text-align: center;
display: block;
margin: 0 auto;
}
/code

But still isn't the iframe centered.

Any idea what goed wrong?

But maybe this problem can be solved if anyone can give me an answer on my second question:

Is there a solution to make the advertisement allways be 100% width and that the height will adjust?

Kind regards,

Arie

[M&M]

If you just want to center (both vertically + horizontally) an image at the center of the screen - here's the css

Put this in your css file and remember to change the name of the image control to match yours.

code
[dsid=myImgCtrl] {
position: absolute;
top: 50%;
left: 50%;
width:100%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/code