如何使两个span始终水平同行且垂直居中？不受浏览器宽度影响

Flexbox is the ideal tool here—it handles both horizontal alignment (keeping elements in a row regardless of window width) and vertical centering effortlessly. Here's how to adjust your code:

Modified CSS #

#container {
  width: 100%;
  display: flex; /* Turns container into a flex container */
  align-items: center; /* Vertically centers flex items */
  gap: 15px; /* Spacing between checkboxyes and headlinecontents (replaces margin-right) */
}

#checkboxyes {
  flex-shrink: 0; /* Prevents checkboxyes from shrinking when window is narrow */
}

#headlinecontents {
  flex: 1; /* Allows headlinecontents to take remaining available space */
}

/* Keep your existing styles below */
#checkbox { margin-right: 5px; }
#headline { font-weight: bold; }
#contents {}

Explanation #

• display: flex on #container: This makes the two child spans (checkboxyes and headlinecontents) flex items, which automatically arrange in a horizontal row and stay that way (no wrapping by default, so they remain side-by-side even on narrow screens).
• align-items: center: This vertically centers the checkboxyes span relative to the full height of the headlinecontents span—exactly what you were missing with float/inline-block approaches.
• flex-shrink: 0 on #checkboxyes: Ensures the checkbox section doesn't get squished when the window is very narrow; it maintains its original width.
• flex:1 on #headlinecontents: Makes the article content section take up all remaining space in the container, so it expands/shrinks with the window while staying aligned next to the checkbox.

Why This Works Better Than Float/Inline-Block #

Float and inline-block rely on older layout methods that don't handle vertical centering of elements with different heights well. Flexbox was designed specifically for these kinds of alignment challenges, making it far more reliable and straightforward.

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