WordPress主题中“Ver mais”按钮无法居中且不破坏上方内容问题

Hey there! Let's get that "Ver mais" button centered without messing up the content above it. I see you've already used CSS to hide the original "Comprar" button, so we'll build on that approach to get things right.

Step 1: Use Flexbox for Reliable Centering #

Flexbox is the safest way to center elements without disrupting surrounding content. Here's how to apply it to your button's parent container:

/* Target the parent container holding your button */
.dhvc-woo-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Keep upper content (like product title/price) left-aligned if needed */
.dhvc-woo-info > *:not(.button) {
  align-self: flex-start;
  width: 100%; /* Ensures text blocks take full width */
}

/* Your existing button hide rule, updated to support the new text */
.dhvc-woo-info .button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
  visibility: hidden;
  position: relative; /* Required for positioning the pseudo-element */
}

/* Add the "Ver mais" text and style it to match your theme */
.dhvc-woo-info .button.product_type_simple.add_to_cart_button.ajax_add_to_cart::after {
  content: "Ver mais";
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Copy original button styles here (adjust to match your theme) */
  padding: 8px 16px;
  background: #your-theme-button-color;
  color: #ffffff;
  border-radius: 4px;
  text-align: center;
}

Step 2: Alternative Method (If Flexbox Conflicts) #

If flexbox clashes with your theme's existing layout, try this text-align approach instead:

/* Make the parent container center inline elements */
.dhvc-woo-info {
  text-align: center;
}

/* Force upper content to stay left-aligned */
.dhvc-woo-info > *:not(.button) {
  text-align: left;
}

/* Hide the original button */
.dhvc-woo-info .button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
  visibility: hidden;
  display: inline-block;
}

/* Insert and style the "Ver mais" text */
.dhvc-woo-info .button.product_type_simple.add_to_cart_button.ajax_add_to_cart::after {
  content: "Ver mais";
  visibility: visible;
  display: block;
  /* Match original button styles here */
}

Key Tips to Avoid Breaking Content #

• Use custom CSS only: Add these styles in your WordPress Customizer (Appearance > Customize > Additional CSS) or a child theme's style.css—never edit the parent theme's files directly (theme updates will erase your changes).
• Inspect with Dev Tools: Press F12 in your browser to check if existing CSS rules (like float: left or position: absolute) are overriding your centering styles. You can use !important temporarily to test, but try to make your selector more specific instead (it's cleaner).
• Match theme styles: Copy padding, font size, and colors from the original "Comprar" button to keep your "Ver mais" button looking consistent with the rest of your site.

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