Align the text on the same horizontal line

I have been struggling with this issue for hours.

Here is my Header.js

<div className="navbar-inner">
      <h2>Text1</h2>
      <h3>Text2</h3>
  </div>

This is the content of my Header.css:

.navbar-inner {
   margin: 0 auto;
   color: #fff;
   display: flex;
   width: 87vw;
   background-color: red;
   justify-content: space-between;
   vertical-align: sub;
}

When I view it, here is what is displayed:

https://i.stack.imgur.com/tIEI5.png

I would like to align Text1 and Text2 on the same Y-axis:

https://i.stack.imgur.com/f0mf1.png

javascripthtmlcssreactjs

Answer №1

To achieve flexibility, apply flex to both the h2 and h3 tags.

h2, h3 {
  display: flex;
  align-items: center;
}

Answer №2

align-items is the key to vertically aligning text when utilizing flexbox.

I have also taken out the default margin from the h2 and h3 elements.

.navbar-inner {
   margin: 0 auto;
   color: #fff;
   display: flex;
   width: 87vw;
   background-color: red;
   justify-content: space-between;

   /* New styles */
   align-items: flex-end;
   padding: 5px;
}

h2, h3 {
  margin: 0;
}

You may need to tweak the padding to achieve your desired alignment in terms of how close the text should be to the edges.

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

Tips on initiating a $http.get request every second using a service

I am working on an angular application that includes a $http.get request. While it currently functions properly, I need it to be executed every second in order to retrieve new data. Service: angular.module('adf.widget.liveCharts') .service(&a ...

javascriptjqueryangularjsangular-services

Running npm start in a React development environment on Linux without automatically opening a browser can be achieved by configuring

As I dive into learning React, I've noticed that I keep running npm start in the terminal multiple times. However, it can be quite frustrating how a new browser window opens each time. I'm currently attempting to prevent this from occurring on my ...

javascriptnode.jsreactjslinuxnpm

Centering H1 and dropdown button horizontally using Bootstrap

I positioned a dropdown button next to an H1 tag, but I noticed that they are not perfectly aligned and I want to move the dropdown button up slightly. My project is utilizing Bootstrap 5.1.3 https://i.sstatic.net/muIwB.png <div class="ps-4 pt-4 ...

htmlcsstwitter-bootstrapbootstrap-5

Restful Spinner

app.config(function(RestangularProvider) { RestangularProvider.addRequestInterceptor(function(element) { console.log("Request initiated"); return element; }); RestangularProvider.addResponseInterceptor(function(data) { ...

javascriptangularjsrestangular

JQuery Reveals AJAX Request with Malfunctioning HTML Markup

I have been working on parsing an XML file and displaying the output in a div. However, I've encountered an issue where the .append() function is not generating the expected HTML output. Below is the JQuery code snippet I am using: var container = $ ...

jqueryhtmlajaxappend

What is the most effective way to save and access British pound symbols?

Every so often, I face this issue where I end up resorting to a messy workaround. There must be a correct way to handle it though, as it's common to work with UK pound symbols. The dilemma is this: when the user inputs a UK pound symbol (£) into a t ...

javascriptasp.netsql-serverajaxcharacter-encoding

Removing elements from an array within a function

Within my class, I defined an array: myUsers = new Array(); I am looking to add usernames to this array in a unique manner. My approach involves checking if the array length is 0 and if so, adding a user. This method works well for adding the first user ...

javascriptarrays

Blazor combines the power of both C# and JavaScript by allowing them to be executed in a single

There is a button that triggers a JavaScript function: <button class="btn-orange btn" onclick="expand(this.closest('.profile'))">JavaScript</button> And there is another button that executes C# code and toggles ic ...

javascriptc#htmlblazor

What is the process of transferring a csv file from a React.js frontend to an Express backend?

I encountered an issue while trying to upload a CSV file from React.js to a backend express. When I click the "Save" button on the frontend, nothing happens and there's no response in the Chrome browser network inspection tab. Can anyone assist me wit ...

reactjsexpressupload

Click text when using the Google Tag Manager - gtm.click {{Click Text}}

I have a list of shops with detailed information like opening hours and phone numbers. When a user clicks on the shop's name, I want the relevant details to appear using javascript. I am trying to capture the shop's name (SHOP NAME) when a user ...

javascriptgoogle-analyticsgoogle-tag-manager

issue in jquery: ajax promise not returning any value

My code snippet: var testApp = (function($){ var info = [{ "layout": "getSample", "view": "conversations", "format": "json", }]; var Data = 'default'; function fetchInfo(opt) { return new Promis ...

javascriptjqueryajax

The IsArray() function in IE8 encounters an issue where it expects an error object

I am interested to know why IE8 is having trouble with this line of code: if (isArray(obj)) When I check in the IE8 javascript console, I see the following: >>obj {...} >>typeof(obj) "object" >>Object.prototype.toString.call(obj) "[obj ...

javascriptangularjsinternet-explorermethodsinternet-explorer-8

jQuery mCustomScrollbars does not correctly resize the height of the div on the initial load

Need help with resizing the height of a div. Currently, I am setting the height of the div using JavaScript, but it only takes effect after refreshing the page (F5). Is there a way to make it work without needing a refresh? Check out the code snippet be ...

phpjquerycsshtml

Fetching initial data in server side rendering by accessing react-router parameters

As I delve into building my first universal react application, utilizing React, Redux, React-Router, React-Router-Redux bindings and Express on the server side, I can't shake the feeling that I'm overlooking something quite obvious. Most aspects ...

expressreactjsreduxreact-routeruniversal

What is the reason behind Express exporting a function instead of an object in the initial stages?

In Node.js, when utilizing express, we start by using const express = require('express') to bring in the express module, which will then yield a function. Afterward, we proceed with const app = express() My inquiry is as follows: What exactly ...

javascriptnode.jsexpress

Tips for splitting the json_encode output in Javascript

Looking for help with extracting specific values from JSON data retrieved via PHP and AJAX. I only want to display the agent name in my ID, not the entire object that includes "name" : "Testing". Here is the console output: [{"agent_module_id":"1","agen ...

javascriptphpjqueryajax

Troubleshooting issue with Express.json() functionality in the latest release of version 4.17

I'm currently exploring the MEAN stack and I am focused on performing CRUD operations. However, when I send data in the request body from Angular to the server, I end up receiving an empty request body. I'm unsure of where I might be making a mis ...

javascriptnode.jsangularexpressmean-stack

jsx eliminate parent based on dimensions

Imagine I have a DOM structured like this <div className="parent"> <div>child 1</div> <div>child 2</div> </div> If the view is on mobile, I would like the DOM to transform into <div>child 1</ ...

htmlreactjsjsx

Cross-origin resource sharing problem arises when JavaScript is loaded asynchronously using script tags created dynamically

By dynamically creating a script as shown below, the JavaScript source is downloaded asynchronously. let newScript = document.createElement('script'); newScript.src = srcUrl; let firstScript = document.getElementsByTagName('script')[0] ...

javascripthtmlajaxxmlhttprequestcors

Execute JavaScript code following the completion of loading and running an external script

My goal is to dynamically load and run a third-party JavaScript file (from a different domain) and then execute some of my own code afterwards. One option I'm considering is using jQuery's $.getScript: $.getScript('https://login.persona.org ...

javascriptjquerybrowserhtml