如何在页面指定位置或色条区域放置图片和文本

现有代码存在的问题 #

• 存在重复id logo，HTML规范要求同一页面内id必须唯一，会导致样式和JS选择器异常
• 元素结构不合理，文本、图片元素和色条容器平级，没有放到色条内部，无法依托色条做位置控制
• <div id="colorstrip"/> 是错误写法，div不属于自闭合标签，会导致DOM结构错乱
• CSS样式放置位置不规范，建议统一放在head标签内，避免页面加载时样式闪烁
• 固定像素坐标定位适配性极差，不同屏幕尺寸下元素会错位，更推荐使用Flex+相对定位组合实现需求

完整可运行代码 #

以下代码实现色条内图片完全居中、文本可自由调整位置的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 色条容器，作为内部元素定位的参照物 */
        .style-strip-holder {
            position: relative;
            width: 100%;
            height: 100px;
            border: solid 1px rgb(199, 199, 199);
            background-color: rgb(199, 199, 199);
        }
        /* 文本样式，调整left/top值即可修改文本位置 */
        #logo-text {
            position: absolute;
            left: 20px; /* 距左侧20px，可按需修改 */
            top: 50%;
            transform: translateY(-50%); /* 自动垂直居中，不用手动计算像素 */
            font-size: 20px;
            font-weight: bold;
        }
        /* 图片容器，实现内部图片完全居中 */
        .logo-img {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
        }
    </style>
</head>
<body>
    <div class="style-strip-holder">
        <span id="logo-text">SMLCA</span>
        <div class="logo-img">
             <img src="//images.squarespace-cdn.com/content/v1/5dd524d14eb1de01971d3330/1574251666169-X1OWTE0W6M3X8ZZJJE4B/SMLCA-web-title.png?format=140w" alt="SMLCA logo">
         </div>
    </div>
    <header class="grey-header">
        <!-- 其他头部内容 -->
    </header>
</body>
</html>

调整说明 #

• 要修改文本位置，直接调整#logo-text的left、right、top、bottom属性数值即可
• 要调整图片位置，修改.logo-img的justify-content和align-items属性即可：比如justify-content: flex-start是左对齐，flex-end是右对齐
• 不需要单独写色条div，直接将色条样式做在外层容器上即可，减少冗余DOM节点

内容的提问来源于stack exchange，提问作者It's Hand-amazing