如何设置DIVI主题下Woocommerce结账页select下拉框样式并实现内容垂直居中

直接使用Flexbox布局控制容器和内部元素对齐，避免line-height导致的文本截断问题，可直接将以下CSS添加到Divi主题自定义CSS面板中：

/* 统一设置下拉框容器高度，开启flex垂直居中 */
.woocommerce-input-wrapper .select2-container--default .select2-selection--single {
  height: 42px; /* 此处修改为与其他输入框一致的高度 */
  display: flex;
  align-items: center;
  padding: 0 12px; /* 左右内边距与其他输入框保持一致即可，无需设置上下内边距 */
  /* 可按需补充边框、圆角、背景色等属性，与站点其他输入框样式统一 */
  border: 1px solid #d8d8d8;
  border-radius: 4px;
}

/* 重置选中文本默认样式，清除固定行高避免截断 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal !important;
  padding: 0 !important;
}

/* 调整下拉箭头垂直居中 */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: auto !important;
}

注意事项 #

• 上述代码中的高度、内边距、边框、圆角数值可根据站点现有输入框的样式参数自行调整，保持整体统一即可
• 若样式未生效，可将代码放到自定义CSS面板最底部，或在属性后添加!important提升优先级，避免被Divi、WooCommerce默认样式覆盖
• Flex布局会自动完成内部元素垂直对齐，无需额外配置line-height，不会出现长文本截断问题

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