父容器设置display:table时，如何让vertical-align:middle生效？

Ah, I get where you're stuck! Let's break down why your current setup isn't working and fix it with either the table-based approach you started with or a more modern, simpler flexbox solution.

Why Your Current Code Fails #

When you set display: table on the parent .btn, the vertical-align: middle property doesn't do anything there—this property is meant to align content inside table cells, not on the table container itself. Your <span> is still acting as a default inline element, so it sticks to the bottom of the parent by default.

Solution 1: Fix the Table-Based Approach #

To make the table method work, you need to turn your child <span> into a table cell, then apply vertical-align: middle to it. Adding a fixed height to the parent will also make the vertical alignment effect clearly visible:

.btn {
  position: relative;
  margin-bottom: 20px;
  padding: 0 10px;
  text-align: left;
  font-size: 16px;
  color: #333;
  background: gray;
  display: table;
  height: 40px; /* Add a height to see the alignment in action */
}

.btn span {
  display: table-cell;
  vertical-align: middle; /* This is where the vertical alignment kicks in */
}

Solution 2: Use Flexbox (Modern & Simpler) #

These days, flexbox is the go-to method for vertical alignment—it's cleaner and doesn't require messing with table display properties. Just set display: flex and align-items: center on the parent, and your child element will automatically center vertically:

.btn {
  position: relative;
  margin-bottom: 20px;
  padding: 0 10px;
  text-align: left;
  font-size: 16px;
  color: #333;
  background: gray;
  display: flex;
  align-items: center; /* Centers content vertically without extra child styles */
  height: 40px; /* Optional, adjust based on your design needs */
}

With this setup, you don't need any extra styles on the <span>—flexbox handles the alignment for you automatically.

Either of these solutions will fix your bottom-aligned span issue. I'd recommend the flexbox approach since it's more intuitive and widely used in modern web development.

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