HTML CSS如何实现文本居中不受logo图片宽度影响

问题根因 #

你当前使用固定值margin-left:140px控制标题的左边距，这个值是适配特定宽度logo的，更换不同宽度的logo后固定边距自然会导致居中失效，同时你的代码里存在非法的<th>标签嵌套（<th>仅可用于表格<tr>节点内，直接放在flex容器中属于无效标签）。

修改方案 #

利用flex布局的自动填充特性实现自适应，完全脱离对logo宽度的依赖：

1. 移除flex容器内所有非法<th>标签
2. 给flex容器添加align-items: center实现logo和标题的垂直居中对齐，同时补充webkit内核兼容属性
3. 给标题节点添加flex: 1属性，让标题自动填充logo以外的所有剩余宽度，同时补充webkit内核兼容属性
4. 删除标题上的固定margin-left、margin-top、固定width属性，保留text-align: center即可实现文本在剩余宽度内居中

修改后完整代码 #

<div class="row">
    <div class="col-12 mb4" style="display: flex; display: -webkit-box; margin-top:30px; align-items: center; -webkit-box-align: center;">
        <img style="max-width: 100%; height: auto;" t-att-src="'data:image/png;base64,%s' % to_text(logo)"/>
        <h4 style="flex: 1; -webkit-box-flex: 1; font-size:40px; font-weight:bold; text-align:center;">
            <span t-esc="nama_ou"/>
        </h4>    
        <!-- <h4 style="max-width:450px;margin-left:500px;overflow-wrap: break-word;font-size:30px;"><span t-esc="operating_unit"/></h4> -->
    </div>
    <div class="col-9 text-right" style="margin-top:22px;" name="moto"/>
</div>

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