WooCommerce我的账户订单页：如何垂直居中订单项文本

你当前的代码通过浮动图片实现左对齐，但导致右侧的产品名称和数量文本无法垂直居中，以下是修改后的代码，通过Flex布局实现垂直居中效果：

// Display the product thumbnail in order view pages
add_filter( 'woocommerce_order_item_name', 'display_product_image_in_order_item', 20, 3 );
function display_product_image_in_order_item( $item_name, $item, $is_visible ) {
    // Targeting view order pages only
    if( is_wc_endpoint_url( 'view-order' ) ) {
        $product   = $item->get_product(); // Get the WC_Product object (from order item)
        $thumbnail = $product->get_image(array( 100, 100)); // Get the product thumbnail (from product object)
        if( $product->get_image_id() > 0 )
            // 用Flex容器包裹图片和产品名称，实现垂直居中
            $item_name = '<div class="order-item-flex-container" style="display: flex; align-items: center; gap: 10px;">' . 
                            '<div class="item-thumbnail" style="width:150px;">' . $thumbnail . '</div>' . 
                            '<div class="item-details">' . $item_name . '</div>' . 
                        '</div>';
                    
   }
    
    return $item_name;
}

修改说明 #

• 外层新增Flex容器，通过display: flex和align-items: center实现图片与文本的垂直居中对齐
• 移除图片容器的浮动属性，Flex布局天然支持横向排列，无需依赖浮动
• 用gap: 10px替代原有的margin-right，更符合现代布局规范
• 将产品名称放入独立的细节容器，方便后续样式扩展

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