如何在双栏段落中间居中放置QR码 制作正常可读的可打印HTML页面

问题原因 #

你当前的写法存在两个核心问题：

1. 给整个flex容器设置了align-items: center，这个属性会作用于所有子元素，导致左右两个文本块也被强制垂直居中，只能在和QR码等高的区域内展示内容，自然会出现文本断裂。
2. 没有给左右文本栏分配宽度，flex默认按内容自适应宽度，排版会出现不可控的偏移。

修复方案 #

只需要调整CSS样式即可，修改后的完整代码如下：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>      
        <style>
            .description{
                display:flex;
                /* 移除全局的align-items: center，避免影响文本块 */
                gap: 24px; /* 调整文本和QR码之间的间距，可按需修改 */
                width: 100%;
                box-sizing: border-box;
            }
            .in, .en{
                flex: 1; /* 左右两栏平分剩余宽度，保证宽度一致 */
                text-align: justify;
            }
            .cut-in{
                align-self: center; /* 仅让QR码单独垂直居中，不影响文本块 */
            }
        </style>
        <div class="description">
            <div class="in"><p>The statues of Khotbuto and Angkotbuto are two giant statues flanking the entrance to the main gate of the East Java Pavilion which is a picture of the twin patihs of the Blambangan kingdom (the title for the king's trusted soldiers or king's guards and is also a palace soldier who is in charge of securing the kingdom under the government of "Prabu Menak Jinggo")</p></div>
            <img src="qr.png" width="150px" height="150px" class="cut-in"/>
            <div class="en"><p>The statues of Khotbuto and Angkotbuto are two giant statues flanking the entrance to the main gate of the East Java Pavilion which is a picture of the twin patihs of the Blambangan kingdom (the title for the king's trusted soldiers or king's guards and is also a palace soldier who is in charge of securing the kingdom under the government of "Prabu Menak Jinggo")</p></div>
        </div>
    </body>
</html>

适配打印的补充说明 #

如果是专门用于打印的页面，可以在样式中额外添加打印适配规则，避免分页时出现内容截断：

@media print {
    .description {
        page-break-inside: avoid;
    }
}

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