Is there a way to align text in the middle while having different icons on each side?

Is there a way to center align the text in this image with minimal use of CSS/HTML? The icons on the left are causing it to be off center:

https://i.sstatic.net/TKOYG.png

Below is the relevant HTML and CSS for this top section:

<div class="navbarheader">
    <div class="header-left">
        <button type="button" class="pull-left btn-nav-menu">
            <i class="navbar-text fa fa-fw fa-navicon"></i>
        </button>
        <button type="button" class="pull-left" ng-click="ui.showSearch()">
            <i class="navbar-text fa fa-fw fa-search"></i>
        </button>
    </div>
    <div class="header-title">
        <div class="navbar-brand">{{ui.headerTitle}}</div>
    </div>
    <div class="header-right">
        <button class="btn-watchlist pull-right" ng-click="ui.toggleWatchlists()">
            <i class="navbar-text fa fa-fw fa-binoculars"></i>
        </button>
    </div>
</div>

CSS:

.navbarheader {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.navbarheader .header-left {
  margin-left: -0.5rem;
}
.navbarheader .header-title {
  flex-grow: 2;
  text-align: center;
}
.navbarheader .header-right {
  margin-right: -0.5rem;
}

Do you have any suggestions on how to maintain the center alignment of the text while allowing it to take up any extra space if needed?

It's important to note that this is within a Bootstrap 4.0 alpha codebase.

htmlcsstwitter-bootstrapflexbox

Answer №1

It is crucial to ensure that both .header-right and .header-left exert equal "flex" pressure on .header-title. Their flex-grow, flex-shrink, and flex-basis values must be identical. By default, they are set to flex:0 1 auto;, so there is no need to concern yourself with flex-grow[0] and flex-shrink[1].

However, it is essential to replace the auto with a tangible value (anything translatable to px by the browser: %, px, em, rem,...), greater than 50% (you can go below 50% if you set flex-grow:1; on both .header-left and .header-right - ensuring they remain equal).

Your title, with a resulting flex-basis of 0, will expand evenly from both the left and right sides. To keep it on one line, add white-space: nowrap to it (if it is lengthy and needs to wrap on narrow screens, place the white-space rule within a @media query; also, adjust the flex-basis of .header-title appropriately for wrapping, ensuring it wraps on a reasonable number of lines - exceeding 100% for total 

flex-basis</code is fine, as browsers scale elements down proportionally with <code>flex-wrap
set to nowrap).

If you prefer code over text, here is the CSS:

.navbarheader {
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-wrap: nowrap;
}
.header-right,
.header-left {
  flex-basis: 50%;
}
.header-right {
  text-align: right;
}

And the prefixed (ready for production) version:

.navbarheader {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  white-space: nowrap;
}
.header-right,
.header-left {
  -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
}
.header-right {
  text-align: right;
}

However, the crucial part is 

.header-right, .header-left { flex-basis: 50%; }

Answer №2

Make sure to distribute your headers in a way that maintains responsiveness. Aim for a balanced amount of space on each side of the center to use as gutters or margins.

.navbarheader .header-left {
  margin-left: -0.5rem;
    width:20%; /* adjust as needed to ensure a total of 100% across all headers */
    background: red;
}
.navbarheader .header-title {
  flex-grow: 2;
  text-align: center;
    width:60%;
    background: yellow;
}
.navbarheader .header-right {
  margin-right: -0.5rem;
    width:20%;
    background: green;
}

Take a look at the demo (I used different background colors for better visual distinction)

Answer №3

If you want to add a gap the same size as the missing icon:

.navbarheader > :last-child{
  margin-left:2.5rem;
}

Check out the demo here

/* Background gradient added to visualize centers */

.navbarheader {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  max-width: 600px;
  padding: 1em 0;
  margin: auto;
  background: linear-gradient(to left, gray 50%, lightgray 50%);
}
.navbarheader .header-left {
  margin-left: -0.5rem;
}
.navbarheader .header-title {
  flex-grow: 2;
  text-align: center;
  background: linear-gradient(to right, gray 50%, lightgray 50%);
}
.navbarheader .header-right {
  margin-right: -0.5rem;
}
.navbarheader >:last-child {
  margin-left: 2.5rem;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="navbarheader">
  <div class="header-left">
    <button type="button" class="pull-left btn-nav-menu">
      <i class="navbar-text fa fa-fw fa-navicon"></i>
    </button>
    <button type="button" class="pull-left" ng-click="ui.showSearch()">
      <i class="navbar-text fa fa-fw fa-search"></i>
    </button>
  </div>
  <div class="header-title">
    <div class="navbar-brand">whatever text</div>
  </div>
  <div class="header-right">
    <button class="btn-watchlist pull-right" ng-click="ui.toggleWatchlists()">
      <i class="navbar-text fa fa-fw fa-binoculars"></i>
    </button>
  </div>
</div>

Answer №4

To center the header-title relative to navbarheader, you need to utilize the position: absolute property. By removing it from the natural flow of elements, the title will always be perfectly centered within the navbarheader.

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px;
  border: 1px solid black;
  position: relative;
}

.title {
  position: absolute;
  left: 50%;
  transform: translateY(-50%);
}

a {
  font-size: 30px;
  padding: 0 10px;
}
<nav>
  <div class="left">
    <a href="">Icon</a>
    <a href="">Icon</a>
  </div>
  
  <div class="title">Title</div>
  
  <div class="right">Icon</div>
</nav>

Answer №5

To solve this issue, try adjusting the layout with negative margins. By centering the text and setting the margin-left to be half of the width of the left icons, you can achieve the desired alignment.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to remove the box-model from an element?

Within my VueJS project, I am faced with nested elements that are generated dynamically like this: <container> <outerElement class="outer" v-for="obj in objects"> <innerElement class="inner" v-for="el ...

htmlcssvue.js

Adjusting Google Maps API v3 Autocomplete dropdown width with JavaScript and SASS to match input field dimensions

I am facing an issue where the autocomplete dropdown (div with class "pac-container") is consistently 4 pixels shy of aligning perfectly with the right side of the input field. It looks like this: https://i.sstatic.net/Y0oq1.png Below is the HTML code: ...

javascriptcssgoogle-mapsgoogle-maps-api-3sass

Getting the height of a group of classes using the style attribute

How can I retrieve the current height of 813px in jQuery from the "style" section? An example of F12 CSS is shown here: https://i.sstatic.net/4wFfR.jpg My attempt at achieving this is as follows: function HandleAccordionControlSizeChanges(isOpened) { ...

jquerycss

Assign the filename to the corresponding label upon file upload

I've customized my file uploader input field by hiding it and using a styled label as the clickable element for uploading files. You can check out the implementation on this jsFiddle. To update the label text with the actual filename once a file is s ...

javascriptjqueryhtmlformsfile-upload

Is it feasible to incorporate two distinct images into a single element using CSS layering?

I have a question about setting a background image for a web page using CSS. Currently, I have the following code: body { font-size: 62.5%; /* Resets 1em to 10px */ font-family: Verdana, Arial, Sans-Serif; background-color: #9D5922; color: #000; margin ...

cssimagelayoutz-index

Clicking on the delete option will remove the corresponding row of Firebase data

I am encountering an issue that appears to be easy but causing trouble. My goal is to delete a specific row in an HTML table containing data from Firebase. I have managed to delete the entire parent node of users in Firebase when clicking on "Delete" withi ...

javascripthtmlfirebasefirebase-realtime-database

Form with missing input fields submits nothing to the server

I created a Node project with a single view page for users to access information. When I use an HTML form to send data, the content is empty. I have verified multiple times using Postman that the information is being saved successfully when sent with the P ...

javascripthtmlnode.jsexpress

What is the best way to split text copied from a textarea into <p> paragraphs with an equal number of characters in each?

Check out this JSFiddle version I've found a JSFiddle example that seems perfect for my current project needs. However, I'm wondering how to modify the code to ensure that each paragraph is evenly divided with the same number of characters and a ...

javascriptjqueryhtmlcssparagraph

Using inline style instead of relying on the quill editor's built-in classes, as classes may not be accessible in order to render HTML effectively

I have integrated the ngx-quill editor into my Angular project as the rich text editor. I plan to save the generated HTML in a database and display it on various browsers using innerHTML. Since the styling is done through a class attribute that references ...

cssangularwysiwygquillngx-quill

Troubleshooting Alignment Problem of Maximize and Close Icons in RadWindow Using ASP.Net

Currently, I am utilizing telerik radwindow to showcase a PDF document. The window seems to be functioning correctly, but there is an issue with the alignment of the maximize and close icons. Ideally, they should appear in the same row, however, they are b ...

c#cssasp.nettelerikradwindow

"What's the best way to make sure a checkbox stays checked and its content remains visible after a

After updating my HTML content, it now consists of a hidden table inside a div with the class "myClass": <div class="myClass" style="display:none"> <table class="table table-hover"> ..... </table> </div> The table remains hidden u ...

javascriptjqueryhtmlcheckbox

Avoid cascading of the 'display' property in JavaScript styling to prevent inheritance

Is there a way in Javascript to toggle the visibility of a larger portion of HTML without affecting inner display properties with display: <value>? Despite setting an outer display property using Javascript, the inner display properties are also alt ...

javascripthtmlcss

What is the reason behind changing the line-height for one inline-block sibling div affecting both divs?

Here's my setup: <div> <div style="display:inline-block; ">div_1</div> <div style="display:inline-block; line-height:20px;">div_2</div> </div> Why does setting the line-height property f ...

htmlcss

Coat the div with a uniform shade of pure white

I need assistance on applying a solid white background color to hide the text behind it. For better understanding, I have attached a screenshot as a reference. https://i.stack.imgur.com/f8Qd9.png The issue arises when I click on the dropdown in the heade ...

javascripthtmlcssreactjs

PHP and AJAX allow for seamless data retrieval without the need for page refreshing, and the data can be easily displayed in a modal window

I am currently encountering an issue with sending data to another page without refreshing. I am able to send the data as text, but for some reason, I am unable to send it as a modal. Why might this be happening? Here is an image of my current page https:/ ...

javascriptphphtmlmysqlajax

Incorporate an external website into HTML5 code

I have a dilemma with embedding one website into another. I am currently utilizing embed code for this purpose. <object data="http://mywebsite.com" width="100%" height="100%"> <embed src="http://mywebsite.com" width="100%" height="100%"> ...

htmlembedresponsive

Is your Chrome DevTools changing CSS Link files to "Constructed Stylesheet" after you edit the CSS using Inspect Element? Find out how to fix this issue!

This issue relates to CSS files that are initially not identified as constructed stylesheets but end up being displayed as such after editing, rendering the file inaccessible. Specifically in Google Chrome DevTools (last observed in Chrome 86): Whenever ...

cssgoogle-chromegoogle-chrome-devtoolsinspect-element

Personalized sorting to match the unique rendering of cells in Material UI Data Grid

I have integrated the Material UI V4 Data Grid component into my React Js application. The Data Grid component requires two props: rows (list type) and columns (list type). Below is a sample row item: const rows = [ { id: 1, customerName: " ...

javascriptcssreactjsmaterial-ui

Schedule Master: A sophisticated tool for time management

I have been following the instructions to implement a date time picker from this tutorial. I downloaded the necessary js and css files and placed them in the respective directories. However, when I click on the calendar icon, the calendar does not pop up. ...

javascripthtmlcsstwitter-bootstrap

The arrangement of columns is not correctly aligned

My website layout is giving me trouble. I want to create a three column design, but unfortunately, it's not aligning properly. Each subsequent column is being pushed down slightly more than the previous one. Is there any way to fix this issue? Interes ...

htmlcss