图片垂直底部对齐失效求助：vertical-align:bottom未生效

Hey there, let's break down why your vertical-align: bottom rule isn't doing anything, and fix that alignment issue for good.

The Root Cause #

The main problem here is float: left on your <img> elements. When you float an element, it's removed from the normal document flow, and vertical-align only works on inline/inline-block elements or table cells—float elements ignore this property entirely. That's why your alignment rule is being completely ignored.

On top of that, your HTML structure wraps each icon in a .icon <div> (a block-level element by default), but your CSS targets the <img> directly with floats. This means each .icon div still stacks vertically, and the floated images just sit inside their own blocks, making consistent alignment impossible.

Fixes to Try #

Here are two reliable solutions to get those icons aligned to the bottom:

Solution 1: Use Flexbox (Recommended) #

Flexbox is the modern, clean way to handle alignment like this. Target the parent container of your .icon divs (I assume that's .social-icons) and set up flex properties:

/* Parent container styles */
.social-icons {
  display: flex;
  align-items: flex-end; /* Forces all child elements to align to the bottom */
  gap: 15px; /* Replaces margin-left for consistent spacing between icons */
  margin-top: 40px;
}

/* Reset .icon div styles */
.icon {
  /* No extra styles needed here unless you want to add padding/margin */
}

/* Image styles (cleaned up) */
.social-icons img {
  max-height: 35px;
  max-width: 35px;
  padding-right: 30px;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  /* Remove float: left—flexbox handles layout now! */
}

Flexbox takes care of spacing and alignment without the headaches of floats, and it's supported by all modern browsers.

Solution 2: Ditch Floats for Inline-Block #

If you need to support older browsers, you can switch to inline-block elements instead of floats:

/* Parent container */
.social-icons {
  margin-top: 40px;
  font-size: 0; /* Fixes extra spacing between inline-block elements */
}

/* Icon container styles */
.icon {
  display: inline-block;
  vertical-align: bottom; /* Aligns each container to the bottom */
  margin-left: 15px;
  font-size: 16px; /* Reset font size since we set parent to 0 */
}

/* Image styles */
.social-icons img {
  max-height: 35px;
  max-width: 35px;
  padding-right: 30px;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  /* Remove float: left */
}

This uses vertical-align: bottom on the .icon containers (now inline-block) to get consistent alignment. The font-size: 0 trick fixes the tiny gaps that can appear between inline-block elements.

Quick Extra Notes #

• You have a couple of typos in your alt text: the YouTube icon says "Facebook", and LinkedIn says "LinedIn". Fixing these will improve accessibility for screen readers.
• Try to avoid using !important unless absolutely necessary—it makes debugging styles way harder. Your max-height/max-width rules probably don't need it if there's no conflicting CSS.

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