CODEWITHSUNDEEP
htmlcssiframe
b4rbika
b4rbika

Reputation: 157

How to horizontally center content of iframe (Google Map)? Usual methods not working

I want to get an embedded map effect like this one: http://themeforest.net/item/yalu-creative-multipurpose-template-html/full_screen_preview/4569177 except I need to do it with an iframe not JS like in the example. My sections have a max width but the map's container is set to overflow:visible to allow the iframe to show through.

I have tried the following CSS on the map div and the iframe itself too:

display:block;
margin:auto;
text-align: center;

and they didn't work. Please help... thank you.

My HTML:

<div class="section">
<h2>Where we are </h2>
    <div class="map">
        <iframe width="605" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=3-4+High+Street+Hitchin+SG5+1BH&amp;aq=&amp;sll=51.48931,-0.08819&amp;sspn=0.868785,2.113495&amp;ie=UTF8&amp;hq=&amp;hnear=3-4+High+St,+Hitchin+SG5+1BH,+United+Kingdom&amp;t=m&amp;ll=51.947915,-0.278864&amp;spn=0.013226,0.051842&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>
    </div>
</div>

My CSS:

div.section { 
 width: 80%; 
 max-width: 600px; 
 margin: 0 auto 40px;
}

div.map { 
 margin: auto; 
 width: 100%; 
 height: 25rem;
}

I also have the following script going on, to set the iframe width depending on screen width (the default 605 width is there because iframes must have a set width in the HTML AFAIK:

if($(window).width() < 1100) {
    $('iframe').attr("width", $(window).width());
}
else {
    $('iframe').attr("width", "1100");
}

Fiddle here: http://jsfiddle.net/Ykx2w/

Upvotes: 1

Views: 7269

Answers (2)

Borys Generalov
Borys Generalov

Reputation: 2345

Ok, now I am confused. I would suggest to be more specific and clearly indicate what you are trying to achieve. Following the link you posted, I do not see any map, hence you may be talking either about id="main-slider" (which fills all available space, but not centered horizontally) or section id="main" (centered horizontally, but has static width). Which one do you need?

Also I updated my last sample to work under IE browser and auto fill all available horizontal space (resize the window): http://jsfiddle.net/Ykx2w/3/. If that's not what you need - try to describe better your need.

Upvotes: 1

Borys Generalov
Borys Generalov

Reputation: 2345

Ok, I did small changes here: centered iframe. Basically you need this CSS rule only:

div.map iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Upvotes: 0

Related Questions