How to center an iframe, responsive


Tags: css,iframe,responsive-design,center

Problem :

I have this small part of html code, and like to the iframe just the half size, but centered of the page:

Here is the page: https://www.outdoorequipped.com/active/contacts

<div class="row">
<div class="map-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2s!4v1451982933747!6m8!1m7!1sIT5z6S82FJMAAAQZdjRuFQ!2m2!1d34.238620415813!2d-77.94889641093141!3f55.18!4f0!5f0.7820865974627469" height="250" width="600"></iframe>
</div>
</div>

and her my css:

.map-container {
  position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

/* 16x9 Aspect Ratio */
.map-container-16x9 {
  padding-bottom: 56.25%;
}

/* 4x3 Aspect Ratio */
.map-container-4x3 {
  padding-bottom: 75%;
}

.map-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

Any idea how to do it correct?



Solution :

Would this be what you're trying to do ?

.map-container iframe {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
}

Or this ? (without absolute positioning)

.map-container iframe {
    width: 50%;
    display: block;      
    margin: auto;
}

It depends if you want to center it vertically as well or not.


    CSS Howto..

    How to fix float sidebar in Wordpress with Constructor theme?

    How to bottom align a title of variable length

    How to make the height of a div within a master page expand in a content page?

    How to fix sizes when I developed my website with 'more space' display setting on macbook retina

    How to check if all CSS files have been downloaded to insert HTML using JavaScript?

    How to debug CSS bundled by Webpack?

    How to hide elements with css using checkboxes: different outputs according to element id or class?

    How to dynamically change the color of the selected menu item of a web page?

    How to blur a banner photo in CSS Style?

    How to pause a CSS keyframe animation when it ends the first cycle?

    What is the best CSS trick to reduce how much HTML you need?

    Hide a partially shown div

    How to correct CSS formatting problem in Visual Studio

    How to set the target images that should go uner this code

    How can
    /
    /
    's with 100% width, yet discrepancies in mobile browsers, be combatted?

    How to apply css to particular selected child in ivh-treeview?

    How can I escape string css in sass/scss?

    How can I make the side elements spin on the x-axis in this animation?

    How do I interact with @font-face definitions using the Chrome debugger?

    How to add formatting to my pagination

    How to add offset border to image of unknown size?

    How come half the triangle is missing

    How to place a css button in center (horizontal) of four table columns

    Why is my text not showing in my DIV?

    How to generate unique css selector for DOM element?

    how to make css contents like boxes, text as center?

    How to position child div to the center of every parents div using position absolute in css [duplicate]

    How to set min-height using css [closed]

    CSS: How to set height of body element to fill rest of total height excluding variable length header and footer

    How to add html and css in public function? [closed]