使用Flexbox实现图片与文本的水平居中

Hey there! Let's fix this up so your text and image are perfectly aligned horizontally, your content has equal spacing on both sides, and we'll clean up that code to make it way more maintainable.

First, let's break down the unnecessary bits in your current code:

• position:absolute on .window is probably overkill unless you specifically need this container to be positioned absolutely relative to a parent element. If it's just a regular section on your page, we can ditch that.
• vertical-align: top on a flex container does nothing—flex uses align-items for vertical alignment instead.
• You're mixing flexbox with old positioning hacks, which isn't needed since flexbox handles alignment tasks seamlessly.

Here's the optimized, clean solution:

Final CSS Code #

/* Main container - simplified */
.window {
  width: 400px;
  height: 300px;
  background-color: #424242;
  /* Optional: uncomment below if you want the entire window centered on the page */
  /* margin: 0 auto; */
}

/* Content wrapper - handles alignment and spacing */
.content {
  padding-top: 50px;
  /* Control side spacing: 80% width means 10% padding on left/right */
  width: 80%;
  /* Center the wrapper inside .window */
  margin: 0 auto;
  /* Use flexbox for horizontal alignment */
  display: flex;
  /* Vertically center image and text relative to each other */
  align-items: center;
  /* Add consistent space between image and text */
  gap: 12px;
}

img {
  height: 32px;
  width: 32px;
  /* Min dimensions are redundant here since we're setting fixed sizes */
}

Key Explanations: #

• .window: Removed position:absolute (add it back only if you need the container to sit relative to a parent with position:relative). The optional margin:0 auto will center the entire window on the page if you need that.
• .content:
  • width:80% creates equal left/right spacing (adjust this percentage to make the content wider/narrower). margin:0 auto ensures the wrapper is centered inside .window.
  • display:flex enables flexbox, which makes horizontal alignment trivial without messy floats or positioning.
  • align-items:center keeps the image and text vertically aligned to each other's middle (swap this for align-items:flex-start if you want them top-aligned instead).
  • gap:12px adds consistent space between the image and text—no need for individual margins on elements.
• img: Simplified the styling since fixed width/height values make min-width/min-height redundant here.

Example HTML to Match: #

<div class="window">
  <div class="content">
    <img src="your-image-path.png" alt="Image description">
    <span>Your accompanying text here</span>
  </div>
</div>

This code is cleaner, easier to adjust, and hits all your requirements: horizontal alignment of image and text, equal side spacing for the content, and uses modern flexbox best practices instead of outdated workarounds.

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