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

Utilizing Electron to save editable user data in a .txt file

I am making an electron app that converts data from .txt files to Javascript arrays. This data is stored inside a folder called faces in the main directory. I also have a button in my app which, when clicked opens file explorer at the faces folder so the u ...

javascripthtmlcsselectronelectron-builder

Emphasize table cells dynamically

Query How can I dynamically highlight a selected td? Codepen Example View Pen here Code Snippet The map consists of a randomly generated 2D array, like this: map = [[1,1,1,1,0], [1,0,0,0,0], [1,0,1,1,1], [1,0,0,0,1], [1,1, ...

javascriptjqueryhtml-table

What are the best ways to customize exported and slotted components in Svelte?

Is there a similarity between Svelte slots and vanilla-js/dom functionality (I'm having trouble with it). In html/js, I can achieve the following: <style> body {color: red;} /* style exposed part from outside */ my-element::par ...

javascripthtmlsvelte

Fixing 500 (Internal Server Error) in Vue.js and Laravel: The Ultimate Guide

Working on a university project using Vue.js and Laravel, I need assistance with sending information to the API. I'm trying to use axios for the POST request, but it's giving me an error: 500 (Internal Server Error). I can't seem to identif ...

javascriptphplaravelvue.js

Using hooks is restricted to the confines of a function component. An error will occur if they are called outside of this scope: "

How can I integrate a shopping cart feature into my app? I've created a separate file with the necessary functions, but I keep encountering an error related to invalid hook calls. export function CartProvider(props) { const [items, setItems] = u ...

javascriptreactjsreact-nativereact-hooks

Using Jquery to implement autocomplete functionality by iterating over each item with the .each

I have been attempting to implement autocomplete using the .each() function. I am referring to the documentation on http://jqueryui.com/autocomplete/. You can view my attempt in this FIDDLE link where it is currently not functioning as expected. The scen ...

jqueryhtmlautocompleteeach

Leveraging Excel VBA to manipulate the selection in a dropdown menu on a webpage

Is there a way to select a specific value using Excel VBA? <div class="drpCompanies"> <select class="selectBox homepage selectCompanies" style="padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px"> <op ...

htmlexcelvba

Unit testing an API built with Express and Mongoose using Jest

I have decided to implement a TDD approach for a user API that I am working on. Specifically, I am looking to add unit tests for two functions: userRegister and userLogin. Here is the code snippet from my app.js: 'use strict' const express = r ...

javascriptexpressmongoosetddjestjs

The customization feature in Mui v5 is unable to implement the color specified in the

I have created a custom theme in MUI V5 as shown below: import React from "react"; import { createTheme, Theme } from "@mui/material/styles"; import { brown, red } from "@mui/material/colors"; export const theme = creat ...

reactjsmaterial-ui

Ways to verify the efficiency of view engines such as Pug, EJS, and HTML

Currently, I am in the process of creating a Node.js Web Server. Initially, I decided to use pug as my view engine for this project. However, the Web Designer provided me with HTML files that have a very different syntax from pug. As a result, I am cons ...

htmlnode.jsperformancepugejs

Adding Multiple Items to an Express Endpoint

I have a requirement to store multiple objects in my mongo database within an express route. Currently, the process is smooth when I post individual objects (such as ONE casino), as shown below. Instead of repeating this numerous times, I am seeking assist ...

javascriptdatabasemongodbexpressmongoose

Passing information from the frontend to the backend in a ReactJS/NodeJS application: A guide on sending

Currently, I am in the process of developing a website and looking to enhance my API functionality. My setup includes a frontend React app and a backend Express Node.js server. In addition, I have a local webserver that contains information on football ma ...

reactjsexpressaxios

What is the best way to embed a section of another website within an iframe and seamlessly guide a user to complete a purchase using a shopping cart?

Seeking advice on how to improve the functionality of my website. Currently, the domain I'm focusing on serves as a landing page, redirecting users to another site for purchases. I've built a separate website for this domain in order to establis ...

htmlcssiframecart

Is there anyone who can assist in refining the padding and margin issues within this Galleria.js implementation?

I am struggling to understand why the padding and margins around the images in this slideshow theme on PregoApp are uneven. Despite my attempts to adjust the CSS, the issue persists. You can view the site here. Another website using the same implementati ...

jquerycssslideshow

When submitting a form with the jQueryForm plugin, take action on the form by selecting it with `$(this)`

I have a situation where I have multiple forms on one page and am utilizing the jQuery Form plugin to manage them without having to reload the entire page. The issue arises when I need some sort of visual feedback to indicate whether the form submission wa ...

javascriptjqueryhtmlforms

The problem I am facing is with the React Ant d Modal Component, where I am unable to render the

Hey there! I'm currently working with React Js and the 'Ant design Modal Component'. When I click on a button, the modal should open and display the content of each user with their unique ID. However, I'm facing an issue where all modal ...

javascriptreactjsantdant-design-pro

Sanity.io's selection of schema field types for efficient and convenient

Hey there, guys! I recently started using Sanity.io and I'm curious whether there's a way to enhance my code efficiency and reuse certain fields across different schemas. I had an idea that goes something like this: cars.ts: export default { ...

javascripttypescriptsanity

Adjustable Size for Card Design

Here's the current setup of my component: <Card> <CardMedia> <img src="http://images.memes.com/character/meme/evil-toddler"/> </CardMedia> </Card> I've observed that the image is taking up ...

reactjsmaterial-ui

"Looking to move an element across the entire screen on Android? Here's how to do it

While working on animations in React Native, I observed a difference between Android and iOS behavior. Specifically, the transform: [{ translateY: height }] property does not fill the whole screen on Android like it does on iOS. On Android, it only applies ...

androidiosreactjsreact-nativecss-transforms

What is the proper way to call document methods, like getElementByID, in a tsx file?

I am currently in the process of converting plain JavaScript files to TypeScript within a React application. However, I am facing an error with document when using methods like document.getElementById("login-username"). Can you guide me on how to referen ...

javascriptreactjstypescriptjsx