在 ICON 和右墙之间的空间中居中文本 [重复]

Question

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

如下图所示。

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

这样做的最佳方法是什么，以便它可以在不同的设备尺寸上响应/可扩展。最重要的是移动设备，因为这是 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 中，因此是顶盒容器。

任何帮助将不胜感激。

Answer 1

您可以使用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>

Answer 2

假设当用户滚动页面时，图标和标题相对于彼此保持相同的位置，我将通过创建一个弹性框 div 来解决这个问题，然后将图标和标题添加到单独的 div 中弹性盒。然后，您可以相应地调整两个 div 的宽度，然后将 div 中的文本与标题居中对齐。不过肯定有几种方法可以解决这个问题。

.topBox {
   display: flex;
}
.navigationDrawerButton {
   width: 25% // change this to appropriate width
}
.heading-wrapper { // this div will wrap heading
   width: 75% // change this to appropriate width
   text-align: center;
}

Answer 3

你能检查一下下面的代码吗？希望它对你有用。我们已根据您的要求在 position 和 transform 属性的帮助下设置了navigationDrawerButton。

我们使用text-align 属性将prompt 对齐在中心，并在topbox 中设置填充，以便prompt 中的文本不会与navigationDrawerButton 重叠。

请参考此链接：https://jsfiddle.net/yudizsolutions/c51k4b6g/7/

.topBox {
  position: relative;
  padding: 10px 60px;
}

.navigationDrawerButton {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  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));
}

.navButton {
  display: block;
}

.prompt {
  margin: 0;
  text-align: center;
}

<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>