Center text in the space between ICON and right wall

Question

I have some header text next to a button for my navigation drawer.

As shown in the picture below.

The navigation icon is in the right place. I want to be able to center the text between the right side of the navigation icon and the left side of the end of the window.

What's the best way to do this so it will be responsive/scalable on different device sizes. Most importantly mobile as this is a PWA.

This is the current html for the top section.

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

This is my current 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));
}

I was thinking I need to wrap them both in a div hence the top box container.

Any help would be appreciated.

score 0 · Answer 1 · answered Feb 09 '21 at 04:06

You can use flexbox.

Check it in action on 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>

score 0 · Answer 2 · answered Feb 09 '21 at 04:10

Assuming that the icon and the heading stay in the same position relative to each other as the user scrolls the page, I would solve this by creating a flex box div, and then add both the icon and heading to separate divs inside of the flexbox. You can then adjust the widths of the two divs accordingly and then center align the text in the div with the heading. There are definitely a few ways you could solve this though.

.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;
}

score 0 · Answer 3 · answered Feb 09 '21 at 06:22

Can you please check the below code? Hope it will work for you. We have set the navigationDrawerButton with the help of position and transform property as per your requirement.

We have aligned prompt in the center using the text-align property and also set padding in topbox so that text in the prompt doesn't overlap with navigationDrawerButton.

Please refer to this link: 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>

Center text in the space between ICON and right wall

3 Answers3