I've been attempting to align the iframe element in the center without success, despite trying out various solutions from

Despite trying to center-align the div using style="text-align: center;", display: block, and align="center", none of these methods seemed to work for me. Here is the code including all attempts:

<div align="center" style="text-align: center;">
    <script src="https://donorbox.org/widget.js" paypalExpress="false"></script><iframe allowpaymentrequest="" frameborder="0" height="900px" name="donorbox" scrolling="no" seamless="seamless" src="https://donorbox.org/embed/ondecc?default_interval=o" style="min-width: 310px; max-height:none!important margin: 0 auto; display: block;" width="100%"></iframe>
</div>

And here is the original code:

<script src="https://donorbox.org/widget.js" paypalExpress="false"></script><iframe allowpaymentrequest="" frameborder="0" height="900px" name="donorbox" scrolling="no" seamless="seamless" src="https://donorbox.org/embed/ondecc?default_interval=o" style="min-width: 310px; max-height:none!important" width="100%"></iframe>

It's worth mentioning that I am attempting this within Bootstrap.

htmlcssiframebootstrap-4

Answer №1

Hey there, I've got the solution for you! All you needed to do was include display : flex; and justify-content : center; in the style attribute of your div.

By the way, it's best practice not to use inline css; instead, opt for an external css file.

Check out the updated code below. Let me know if this is what you were looking for :)

<div align="center" style="width : 100%; display : flex; justify-content : center;">
    <script src="https://donorbox.org/widget.js" paypalExpress="false"></script><iframe allowpaymentrequest="" frameborder="0" height="900px" name="donorbox" scrolling="no" seamless="seamless" src="https://donorbox.org/embed/ondecc?default_interval=o" style="min-width: 310px; max-height:none!important; display: block; margin : 0 auto;"></iframe>
</div>

Answer №2

To ensure the iframe does not take up the entire width of its parent element, the width should be set to a value less than 100%.

div{
  text-align: center;
}

iframe{
   display:block;
   margin: 0 auto;
   width: 310px; /* It should not be 100% */ 
   max-height:none!important
}
<div>
<script src="https://donorbox.org/widget.js" paypalExpress="false"></script><iframe allowpaymentrequest="" frameborder="0" height="900px" name="donorbox" scrolling="no" seamless="seamless" src="https://donorbox.org/embed/ondecc?default_interval=o"width="100%"></iframe>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The functionality of .bind() is malfunctioning on both Microsoft Edge and Google Chrome browsers

Everything seems to be running smoothly on Mozilla (version 103.0), but unfortunately, it's not performing as expected on Chrome or Microsoft Edge. $('#loading').bind('ajaxStart', function () { $(this).show(); }).bind('ajaxS ...

javascripthtmljquery

Adding a background color with a background image layered underneath it in CSS - here's how!

Looking to set a background color for a div, with a background image on the bottom of the same div. However, I need the background color to stop once the background image begins. Check out the example image below: ...

htmlcss

How can I eliminate the gap above the footer in iframes alignment?

I have a setup with four iframes: header, menuframe, bodyframe, and footer. The menuframe and bodyframe are positioned next to each other with space between the footer and the menuframe/bodyframe. How can I remove this space? Here is the CSS: iframe{ ...

cssiframe

Customize the bootstrap carousel to show multiple slides at the same time

I am looking to customize the bootstrap 3 carousel in order to show multiple slides at once. I understand that I could place several thumbnails in a single slide (div .item), but the issue is that the carousel will progress through them all at once, moving ...

jquerycsstwitter-bootstraptwitter-bootstrap-3carousel

I am working with three columns and I am looking to keep the center column fixed in place while scrolling

Check out this CSS snippet: #container { margin: 0 auto; width: 1200px; } #col1 { float: left; width: 700px; } #col2 { float: left; width: 100px; padding: 0 17px; } #col3 { float: left; width: 400px; } I am trying t ...

htmlcss

The simple method for incorporating line feed in <s:textarea>

Hey there, I'm currently utilizing struts 2 UI and I seek a means to restrict the number of characters in each row to only 16. Additionally, I want to impose a maximum length limit of 32 characters. Despite my attempts using the 'row' and &a ...

htmlstruts2

What is the reason behind Internet Explorer 11 not supporting conditional comments in HTML? Has this feature been dropped?

I'm having an issue trying to show different content on various web browsers. When using Internet Explorer 11 and Google Chrome 39, the message displayed is "Not Internet Explorer" instead of the expected result. Is there a problem with my code? It&ap ...

htmlinternet-explorerinternet-explorer-11conditional-comments

Ways to showcase HTML table in a four-column layout/grid

Delving into Dynamic HTML table creation, I'm currently using jquery for rendering purposes. At the moment, I am only displaying the table. The Goal I aim to segment my table into four columns or a grid structure Something akin to this: https://i. ...

javascriptjquerycsshtml-table

Click on a button to send the React Router path as a parameter in

I've got a React form with a submission button like this: <Link className="btn btn-secondary btn-width-200 search-submit" to={{pathname: '/booking/search', query: this.state.filters}}> Search </Link> Within the ...

javascripthtmlreactjsurl-routing

Determining the quantity of displays

Can we detect the number of screens in use using JavaScript or jQuery? We are working on an application that should not be displayed on multiple screens, even if the hardware allows for it. Appreciate any assistance with this matter. Thank you. ...

javascriptjqueryhtml

Is there a way to modify CSS class names on-the-fly within an Angular project?

I am working with two CSS classes named as below: .icon_heart{ color: #bdbdbd; } .icon_heart_red{ color: #a6b7d4;; } Within my HTML code, I have incorporated a heart icon. <div class="icon_heart" *ngIf="showheartIcon"> ...

htmlcssangularionic2

Having trouble correctly parsing XML data using JavaScript

My input field contains the following XML code: <?xml version="1.0" encoding="utf-8"?> <players timestamp="1536505850"> <player id="0518" name="Eagles, Philadelphia" position="Def" team="PHI" /> <player id="10271" name="Jones, Jul ...

javascripthtmlxml

What is the best way to replicate tags in selenium when an element has multiple class names?

Extracting information from a webpage where a significant amount of text was concealed behind the "see more" tab. Using selenium to click on all such buttons and then extracting data with beautifulsoup. However, some of these buttons have additional space ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Why is it that this code can upload photos successfully, but not text files?

This is my PHP file for handling form actions. I have successfully implemented image uploads, but I am encountering an 'Invalid File Error' when trying to upload text files. What could be causing this error and how can I resolve it? <?php e ...

javascriptphphtml

Issues with the functionality of the accordion menu

I have implemented an accordion menu on my website. However, I am facing an issue where the 2nd menu always slides up when it gets loaded instead of sliding up after clicking on it. I want the behavior to change so that the sub menus elaborate only upon cl ...

javascriptjquerycss

AngularJS datetimepicker integrated in the HTML script tag

<div class='input-group date' id='datetimepicker'> <input type='text' class="form-control" ng-model="ctrl.startDate" /> <span class="input-group-addon"> <span class="fa fa-calendar"></span> ...

htmlangularjsbootstrap-4datetimepicker

Unleashing the Power of Reactstrap: Making Uncontrolled Collapse Panels Open by Default

Can the uncontrolled collapse be displayed as open by default? Below is the standard code for uncontrolled collapse, which is initially shown as a collapsed tab. <Button color="primary" id="toggler"> Toggle </Button> < ...

htmlcssreactjsbootstrap-5reactstrap

Having numerous calls to isNaN within a JavaScript if-else statement

I've created a JavaScript function that generates div elements and styles them based on user input values. However, I'm facing an issue when trying to display a warning message if the input is not a number. Currently, I'm unable to create th ...

javascriptjquerycssif-statement

Using shadow effects on the <Grid> component with Material UI

Is there a way to implement the box-shadow property on a <Grid> component in Material UI? I've gone through the official documentation regarding Shadows - Material UI, but I'm struggling to grasp how it can be applied to a <Grid>. De ...

cssreactjsmaterial-ui

Generating an HTML table using data from a specified URL source

As a beginner, I am working on creating a dashboard for my smart home using OpenHab2.0. One of the key features I want to include is a widget that displays the next 5 tram departures from my local stop. The table structure for this information looks like: ...

htmlopenhab