Achieve alignment of span and h3 elements in one line

I'm having a bit of trouble with a simple task. I want my span and h3 elements to display on the same line, side by side. However, they are currently appearing on separate lines. Can anyone provide some guidance on how to resolve this issue?

header {
  background-color: black;
  color: white;
  padding: 10px;
  width: 100% !important;
  display: flex;
}

header .glyphicon {
  font-size: 1.5em;
  margin: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<header>
  <span class="glyphicon glyphicon-menu-hamburger"></span>
  <h3>Home</h3>
</header>

twitter-bootstrapcssflexboxtwitter-bootstrap-4

Answer №1

The reason for this issue is that default styles are applied by the browser to the h3 element. An easy fix would be to include a display: inline; style for the h3.

header {
  background-color: black;
  color: white;
  padding: 10px;
  width: 100% !important;
  display: flex;
}

header .glyphicon {
  font-size: 1.5em;
  margin: 5px;
}

h3 {
  display: inline;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<header>
  <span class="glyphicon glyphicon-menu-hamburger"></span>
  <h3>Home</h3>
</header>

Answer №2

Your CSS rule for display: flex is being overridden by a bootstrap rule for display: block. Consider using the important keyword or a more specific selector to override this behavior. You can also add align-items: baseline to align flex items with the font's baseline.

Check out this demo:

header {
  background-color: black;
  color: white;
  padding: 10px;
  width: 100% !important;
  display: flex !important;
  align-items: baseline;
}

header .glyphicon {
  font-size: 1.5em;
  margin: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<header>
  <span class="glyphicon glyphicon-menu-hamburger"></span>
  <h3>Home</h3>
</header>

It's worth noting that using display: inline and display: inline-block also work because of the default vertical-align: baseline property for inline elements.

Answer №3

h1 is a default block element, while span is considered inline.

To change the display of your h1, you can use either display: inline or inline-block.

Check out this link for an example: https://jsfiddle.net/h81pkpne/1/

Answer №4

To achieve the desired layout, simply add display: inline-block; to the specified elements.

header {
  background-color: black;
  color: white;
  padding: 10px;
  width: 100% !important;
  display: flex;
}

header .glyphicon {
  font-size: 1.5em;
  margin: 5px;
}

header > span,
header > h3 {
  display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<header>
  <span class="glyphicon glyphicon-menu-hamburger"></span>
  <h3>Home</h3>
</header>

Answer №5

Using display: flex should resolve the issue, as it seems <header> is being overridden by normalize.css to display: block. I applied the class .header and removed the margin from h3.

Alternatively, other solutions suggested using inline styles or a float could also be effective.

.header {
  background-color: black;
  color: white;
  padding: 10px;
  width: 100%;
  display: flex;
  align-items: center;
}

header .glyphicon {
  font-size: 1.5em;
}

header h3 {
  margin: 2px 0 0 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<header class="header">
  <span class="glyphicon glyphicon-menu-hamburger"></span>
  <h3>Home</h3>
</header>

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

Floating elements are misaligned and not laying out correctly

I've encountered an issue where the footer div is appearing behind the right-hand side div. I have a central container div with two floated divs next to each other, and the footer is separate. I've spent hours trying to fix it but can't figu ...

htmlcsscss-float

Keep the submenu visible upon clicking the sign-in form / Adjust the background color when the parent li is selected

I am facing two issues with my navigation menu that has dropdown lists: When clicking on a parent li, its submenu is displayed, but it gets hidden when clicking on another parent li or anywhere else on the page. For the first li.parent which contains a ...

javascriptjqueryhtmlcss

What is the best way to set a background image to 100vh on mobile devices and 50vh on desktop screens?

Currently learning about bootstrap, I am in the process of creating a hero section for my website. My goal is to have the background image in the hero section take up 50% of the webpage on large screens, but switch to 100% on smaller screens. I suspect th ...

htmlcssbootstrap-5

Is there a way to trigger both the link and the div element simultaneously?

Is there a way to make both the button and the link light up simultaneously when hovering over the div element, instead of just the button lighting up first? <div id="b1"; class = b> <a href="test.html">BUY</a> < ...

htmlcssbuttonhover

How can the 'Read more' feature be modified to impact multiple boxes? (Using jQuery, JS, and CSS)

I am trying to add a 'Read more' feature on my friend's website. I was able to achieve the desired effect, but when I tried to adjust the alignment of the box, it affected the 'Read more' feature. Original design: https://codepen. ...

javascripthtmljquerycssjquery-ui

How do I ensure that my font size completely fills the space in a justified layout using CSS?

Is there a way to style my text to match the appearance in the image shown using CSS? ...

csswidthformulaviewportfont-size

What is the secret to keeping a hover effect active?

As I hover over the buttons in my stack, a text box appears on the right side. The intention is for this text box to act as a scroll box, but it disappears when I move my mouse to scroll because it needs to be continuously hovered upon to stay active. To ...

htmlcsshover

The modal is not displayed when the on click listener is triggered

I'm a beginner in the world of programming and I'm currently working on creating modals that pop up when clicked. However, I'm facing an issue where the pop-up message doesn't appear when I click the button. Oddly enough, only the overl ...

javascripthtmlcss

The transition feature is not functioning properly in Firefox

I have a basic HTML and CSS setup below. It seems to be working fine in Chrome, but I'm having trouble with the transition effect in Firefox. I am currently using Firefox version 18. I tried looking up solutions on Google and Stack Overflow, but none ...

htmlcsscss-transitionstransition

Is there a way to position the table to the right of the registration text boxes?

https://i.sstatic.net/Fh9Bk.jpg Is it possible to position the table using <div> elements? ...

htmlcssformshtml-tablealignment

Issue with the appearance of the footer in my Wordpress template

After creating a WordPress template, I noticed that the footer is not extending to 100% width as expected. Check out the page here Any suggestions on why this might be happening? Could it be due to a missing closing div tag somewhere in the code? Thank ...

csswordpress

Different ways to restrict Table Header to 2 lines using CSS

When it comes to limiting text to a specific width, using white-space:nowrap is usually the go-to solution. However, I am facing a unique challenge where I need to make sure my header text fits within a specific width. I initially tried adding individual ...

htmlcss

Is there a way to make the product list view in Magento much more compact and smaller in size?

My issue is pretty straightforward. I find Magento's product display in list view to be too large for my liking. The images are bigger than necessary and each product takes up too much space. I want to resize the listing so that each product only occu ...

htmlcssmagento

Trouble aligning items in a fieldset with Bootstrap

While working on a wire frame, I am attempting to create the HTML structure based on it. The required structure that needs to be built is outlined in this diagram: https://i.sstatic.net/ypp2f.png Progress has been made on aligning elements using a two-col ...

htmlcsstwitter-bootstrapbootstrap-4

Implementing Clockwise Padding with React Material-UI

Can Mui Box utilize shorthand properties for padding in a clockwise syntax? Unfortunately, this method does not work and results in a syntax error. <Box padding = {2 1 1 2}/> ...

cssreactjsmaterial-ui

What causes the device pixel ratio to vary across different web pages on the same device and operating system?

I am curious about why device pixel ratio varies between different websites and operating systems. For instance, when using the same device, this site displays a different pixel ratio on Windows compared to Ubuntu. On Windows, the pixel ratio is 1.34 whi ...

csswebsassresponsive-designdevicepixelratio

The issue with React select right-to-left (RTL) functionality is that it

When using react select, I include isRtl as a prop like so: <Select onChange={handleChange} isRtl isMulti options={colourOptions} /> However, only the input receives the rtl direction style and not the options. How can I ensure that both the input a ...

javascriptcssreactjsreact-select

Is there a way to align an element to the right of a centered element?

I am trying to center two inputs ("email" and "password") horizontally on the page. However, I also want to add another item to the right of them while keeping the inputs centered. <div style={{ display: "flex", justifyContent: "center" }}> < ...

cssbootstrap-4

Ensuring uniform column heights with Semantic UI

I came across the "equal height" classes in Semantic UI, but I'm having trouble applying them to inner divs, like the "ui segment" for example. More details can be found here. Take a look at my screenshots below: https://i.sstatic.net/o9kwC.png < ...

htmlcsssemantic-ui

Utilizing useState for React Data Picker

I recently attempted to implement the React Data Picker in my React project using npmjs. However, I encountered an issue when trying to import useState from import React, { useState } from "react"; The error message displayed: 'useState&a ...

cssreactjswebfrontendbackend