在 ICON 和右墙之间的空间中居中文本

问题描述

我的导航抽屉按钮旁边有一些标题文本。

如下图所示。

导航图标位于正确的位置。我希望能够将导航图标右侧和窗口末端左侧之间的文本居中。

这样做的最佳方法是什么，以便它可以在不同的设备尺寸上响应/可扩展。最重要的是移动设备，因为这是 PWA。

这是顶部的当前 html。

        <div class="topBox">
            <div class="navigationDrawerButton">
                <svg class='navButton' xmlns="http://www.w3.org/2000/svg" width="42" height="46" stroke="white">
                    <path d="M4 32.8148C4 31.7102 4.89543 30.8148 6 30.8148H33C34.1046 30.8148 35 31.7102 35 32.8148V34C35 35.1046 34.1046 36 33 36H6C4.89543 36 4 35.1046 4 34V32.8148Z" fill="white"/>
                    <path d="M4 17.2593C4 16.1547 4.89543 15.2593 6 15.2593H33C34.1046 15.2593 35 16.1547 35 17.2593V18.4444C35 19.549 34.1046 20.4444 33 20.4444H6C4.89543 20.4444 4 19.549 4 18.4444V17.2593Z" fill="white"/>
                    <path d="M4 3C4 1.89543 4.89543 1 6 1H33C34.1046 1 35 1.89543 35 3V4.18518C35 5.28975 34.1046 6.18518 33 6.18518H6C4.89543 6.18518 4 5.28975 4 4.18518V3Z" fill="white"/>
                </svg>
            </div>
            
            <h1 class="prompt">
                Select an area to search
            </h1>
        </div>

这是我当前的 css。

.navButton {
    position: absolute;
    top: 2%;
    left: 4%;
    fill: #FFFFFF;
    stroke: #FFFFFF;
    -webkit-filter: drop-shadow( 3px 3px 2px rgba(0,.7));
    filter: drop-shadow( 3px 3px 2px rgba(0,.7));
}

我想我需要将它们都包装在一个 div 中，因此是顶盒容器。

任何帮助将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

center html responsive-design scalability