无法通过CSS调整网页中Box Office Mojo数据馈送的位置

Got it, let's sort out that wonky left-aligned Box Office Mojo feed! Wrapping the script in a <p> tag is a good start, but the feed's injected HTML probably has its own default styles (like floats or hardcoded positioning) that override your parent tag's behavior. Here are a few reliable ways to adjust its position with CSS:

1. Style the Parent Container Directly #

Since you've already given the wrapper an id="boxOffice", target that ID to control the feed's overall placement. This is the cleanest approach:

#boxOffice {
  /* Center the container on the page */
  margin: 0 auto;
  /* Limit width to prevent the feed from stretching too wide */
  max-width: 800px;
  /* Optional: Use flex to center internal elements if needed */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

• margin: 0 auto will horizontally center the container within its parent element.
• max-width keeps the feed from looking cramped on large screens.
• The flex properties ensure any elements inside the feed are also centered, even if the script injects multiple items.

2. Override Injected Feed Styles #

Sometimes the script's generated HTML has inline styles (like float: left) that force it to stick to the left. Use a descendant selector to reset these styles:

#boxOffice * {
  /* Clear any default floating */
  float: none !important;
  /* Reset to static positioning */
  position: static !important;
  /* Center individual elements */
  margin-left: auto;
  margin-right: auto;
}

• !important is necessary here because the script might embed inline styles that take priority. Use it sparingly, but it's safe for third-party feeds like this.

3. Quick Inline Style Test #

If you want to test changes without editing a separate CSS file, add styles directly to the wrapper tag:

<p id="boxOffice" style="margin: 0 auto; max-width: 800px; text-align: center;">
  <script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php"></script>
</p>

• text-align: center works well if the feed injects inline or block-level elements that respect text alignment.

Pro Tip #

Use your browser's developer tools (press F12) to inspect the feed's generated HTML. Look for specific classes or IDs on the injected elements (like a <table> or <div>) — this lets you write more targeted CSS instead of using the * wildcard. For example, if it's a table:

#boxOffice table {
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
}

内容的提问来源于stack exchange，提问作者Asking