JavaScript内图片居中对齐问题求助：课程网页项目图片无法居中

Hey there! Let's get that image comparison widget centered on your page—no more stuck-on-the-right issues. Since you're using the initComparisons() function, I'll assume you're working with a classic before/after image setup. Here are the most straightforward fixes:

1. Wrap Your Comparison Widget in a Centering Container #

First, add a parent div around your existing image comparison elements to create a container we can easily center:

<!-- Add this wrapper div -->
<div class="comparison-wrapper">
  <!-- Your existing comparison code here -->
  <div class="img-comp-container">
    <div class="img-comp-img">
      <img src="your-before-image.jpg" alt="Before">
    </div>
    <div class="img-comp-img img-comp-overlay">
      <img src="your-after-image.jpg" alt="After">
    </div>
  </div>
</div>

2. Use CSS to Center the Wrapper #

Choose one of these CSS methods to center the wrapper (and thus your comparison images):

Method A: Flexbox (Modern & Reliable) #

Add this to your stylesheet or <style> tag:

.comparison-wrapper {
  /* Centers horizontally and vertically */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Optional: Make it take up the full viewport height */
  min-height: 100vh;
  margin: 0;
  padding: 20px; /* Add padding to prevent edge clipping */
}

/* Ensure your comparison container doesn't stretch unexpectedly */
.img-comp-container {
  position: relative;
  width: 800px; /* Match your image width */
  height: auto;
}

Method B: Margin Auto (For Simple Horizontal Centering) #

If you only need horizontal centering, use this instead:

.comparison-wrapper {
  width: fit-content; /* Wraps to the width of your images */
  margin: 0 auto; /* Auto left/right margins = horizontal center */
  padding: 20px;
}

3. Clean Up Conflicting Styles #

Double-check for any existing CSS that might be pushing your images right:

• Remove any float: right; properties on your images or their containers
• If a parent element has text-align: right;, override it for your wrapper with text-align: center;
• Ensure your images aren't set to position: absolute; without proper positioning rules

4. Verify the Comparison Script Still Works #

Your initComparisons() function should still run as normal—just make sure it's targeting the correct .img-comp-container elements inside your new wrapper.

Once you apply these changes, refresh your browser, and your image comparison widget should sit nicely in the center of the screen!

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