如何让两个.slide类按钮处于同一行并居中对齐？

Got it, let's sort out this button alignment problem! The core issue here is that your .slide class uses display: block, which forces each <a> tag to take up an entire row on its own. That's why your two buttons are stacked vertically instead of sitting side by side. Here are two solid solutions to get them aligned in the same centered row:

Solution 1: Using inline-block + Parent Container Alignment #

This is a classic approach that works across all browsers:

First, wrap your two buttons in a parent container to control the overall alignment:

<div class="slide-group">
  <a class="slide"><<</a>
  <a class="slide">>></a>
</div>

Then update your CSS to adjust the display behavior and centering:

.slide-group {
  text-align: center; /* Centers all inline/inline-block children horizontally */
}

.slide {
  display: inline-block; /* Replaces block—lets elements sit side by side while keeping width/height */
  font-size: 16px;
  line-height: 20px;
  padding: 7px 4px;
  cursor: pointer;
  height: 32px;
  width: 32px;
  margin: 5px; /* Adds spacing around buttons; removes auto since parent handles centering */
  background-color: #2874f0;
  border-radius: 50%;
  color: #fff;
  text-align: center;
}

Key Changes: #

• display: inline-block: Lets each button retain block-level properties (like fixed width/height) while allowing them to sit in the same row.
• Parent container text-align: center: Ensures the entire group of buttons is centered on the page.
• Adjusted margin: Removed auto (which only centers block-level elements) and used a uniform margin to space out the buttons.

Solution 2: Modern Flexbox Approach #

If you prefer a more modern, flexible method, flexbox is perfect here—it simplifies alignment and spacing:

Use the same parent container as above, then update your CSS to:

.slide-group {
  display: flex;
  justify-content: center; /* Horizontally centers the buttons */
  gap: 10px; /* Adds consistent spacing between buttons (no need for margin adjustments) */
}

.slide {
  display: block; /* You can keep block here—flex handles the row layout */
  font-size: 16px;
  line-height: 20px;
  padding: 7px 4px;
  cursor: pointer;
  height: 32px;
  width: 32px;
  margin: 5px 0; /* Only vertical margin for spacing above/below the group */
  background-color: #2874f0;
  border-radius: 50%;
  color: #fff;
  text-align: center;
}

Why Flexbox Works Better: #

• justify-content: center takes care of horizontal centering without relying on text-align.
• gap gives you precise, consistent spacing between buttons without having to tweak individual margins.
• It's more adaptable if you ever need to add more buttons or adjust the layout later.

Either solution will get your two buttons sitting neatly in the same centered row—pick whichever fits your project's browser support needs or personal preference!

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