时间戳

首页 > 解决方案 > 在 ICON 和右墙之间的空间中居中文本

html - 在 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, 0, 0, .7));
    filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}

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

任何帮助，将不胜感激。

标签： htmlcssresponsive-designcenterscalability

解决方案

您可以使用flexbox.

在 Codepen 上检查它：https ://codepen.io/manaskhandelwal1/pen/wvoWXgp?editors=1100

.topBox {
  background-color: orangered;
  display: flex;
  align-items: center;
}

.navButton {
  stroke: #111;
  padding: 0 10px;
}

.navButton path {
  fill: #111;
}

.prompt {
  width: 95%;
  text-align: center;
}
<div class="topBox">
  <div class="navigationDrawerButton">
    <svg class='navButton' xmlns="http://www.w3.org/2000/svg" width="42" height="38" 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>

推荐阅读