How can I align one div in the vertical center while keeping another div in its original

I need help! How can I vertically center the .tagline-container within a div that has two children divs, without affecting the positioning of the nav?

<div class="header">
    <nav class="navbar">
      <h1>Rainey 13 Foundation</h1>
      <ul class="nav-items">
        <li class="nav-item">
          <a href="#" class="nav-link">Home</a>
          <a href="#" class="nav-link">About</a>
          <a href="#" class="nav-link">Contact</a>
          <a href="#" class="nav-link">Donate</a>
        </li>
      </ul>
    </nav>
    <div class="tagline-container">
      <h1 class="tagline">Fostering the First Steps, and Beyond!</h1>
</div>

Snippet of CSS code used:

.header {
  background-image: url(./img/background.jpg);
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.tagline-container {
  align-items: center;
  justify-content: center;
}

The issue is that the current setup does not achieve the desired vertical centering.

Complete HTML and CSS code snippet below:

@font-face {
  font-family: NATS;
  src: url(./fonts/NATS-Regular.ttf);
}

* {
  margin: 0;
  padding: 0;
  font-family: NATS;
}

.header {
  display: inline-block;
  background-image: url(./img/background.jpg);
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.tagline-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rainey 13 Foundation</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <div class="header">
    <nav class="navbar">
      <span>Rainey 13 Foundation</span>
      <ul class="nav-items">
        <li class="nav-item">
          <a href="#" class="nav-link">Home</a>
          <a href="#" class="nav-link">About</a>
          <a href="#" class="nav-link">Contact</a>
          <a href="#" class="nav-link">Donate</a>
        </li>
      </ul>
    </nav>
    <div class="tagline-container">
      <h1 class="tagline">Fostering the First Steps, and Beyond!</h1>
    </div>

  </div>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

</html>

htmlcssbootstrap-4

Answer №1

To adjust the alignment of the .tagline-container, you can utilize the align-self property. This property allows you to position the element on the cross-axis of the flex direction, which in this case is vertically (since the default direction is row):

.header {
  background-image: url(./img/background.jpg);
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.tagline-container {
  align-self: center;
}
<div class="header">
  <nav class="navbar">
    <h1>Rainey 13 Foundation</h1>
    <ul class="nav-items">
      <li class="nav-item">
        <a href="#" class="nav-link">Home</a>
        <a href="#" class="nav-link">About</a>
        <a href="#" class="nav-link">Contact</a>
        <a href="#" class="nav-link">Donate</a>
      </li>
    </ul>
  </nav>
  <div class="tagline-container">
    <h1 class="tagline">Fostering the First Steps, and Beyond!</h1>
  </div>
</div>

Bootstrap Version

If you want to apply the align-self property within the Bootstrap framework, you can add it directly to the nav element:

@font-face {
  font-family: NATS;
  src: url(./fonts/NATS-Regular.ttf);
}

* {
  margin: 0;
  padding: 0;
  font-family: NATS;
}

.header {
  display: inline-block;
  background-image: url(./img/background.jpg);
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: flex;
}

nav {
  align-self: flex-start;
}

.tagline-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rainey 13 Foundation</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <div class="header">
    <nav class="navbar">
      <span>Rainey 13 Foundation</span>
      <ul class="nav-items">
        <li class="nav-item">
          <a href="#" class="nav-link">Home</a>
          <a href="#" class="nav-link">About</a>
          <a href="#" class="nav-link">Contact</a>
          <a href="#" class="nav-link">Donate</a>
        </li>
      </ul>
    </nav>
    <div class="tagline-container">
      <h1 class="tagline">Fostering the First Steps, and Beyond!</h1>
    </div>

  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

</html>

Answer №2

If you want to center content horizontally, you can utilize the margin: auto property within the tagline-container

.header {
  background-image: url(./img/background.jpg);
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.tagline-container {
  margin: auto;
}
<div class="header">
    <nav class="navbar">
      <h1>Rainey 13 Foundation</h1>
      <ul class="nav-items">
        <li class="nav-item">
          <a href="#" class="nav-link">Home</a>
          <a href="#" class="nav-link">About</a>
          <a href="#" class="nav-link">Contact</a>
          <a href="#" class="nav-link">Donate</a>
        </li>
      </ul>
    </nav>
    <div class="tagline-container">
      <h1 class="tagline">Fostering the First Steps, and Beyond!</h1>
</div>

Answer №3

To achieve the desired layout with .tagline-container, it is essential to set it to a flex display in order to utilize justify-content and align-items.

By utilizing the flex layout as instructed, the elements will align and justify as intended.

.header {
  background-image: url(./img/background.jpg);
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.tagline-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rainey 13 Foundation</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles.css"/>
</head>
<body>
  <div class="header">
    <nav class="main-navbar">
      <span>Rainey 13 Foundation</span>
      <ul class="nav-items">
        <li class="nav-item">
          <a href="#" class="nav-link">Home</a>
          <a href="#" class="nav-link">About</a>
          <a href="#" class="nav-link">Contact</a>
          <a href="#" class="nav-link">Donate</a>
        </li>
      </ul>
    </nav>
    <div class="tagline-container">
      <h1 class="tagline">Fostering the First Steps, and Beyond!</h1>
    </div>

  </div>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

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 for executing a jQuery nested template in a recursive manner

Imagine a world where JSON objects and jQuery templating collide in a thought-provoking inception-like scenario. How can we dive deeper into this rabbit hole? The catch is, I'm a bit lazy and hoping the code will do most of the heavy lifting... Q:& ...

javascriptjqueryhtmlrecursionjquery-templates

Designing Progress Bars with CSS3

I'm currently working on enhancing the appearance of the progress bars across my website, all of which are built using jQuery UI. My goal is to achieve a design similar to the one shown below (featuring a stylish bevel effect and a visually appealing ...

css

Choosing each item from a lineup, one by one

Currently, I am in the process of developing a small website with multiple pages. The main requirement for this project is to have a vertical menu on the home page. Implementing the menu was relatively easy. I successfully added a hover effect to the vert ...

jqueryhtmlcss

Make sure to deselect all other radio buttons when selecting one, running into difficulties

Having an issue with my UI when selecting radio buttons by clicking on a div: A loop that displays different radio buttons: {% for product in collections.regalos.products %} <li class="grid__item large--one-third gift-card"> <div class="gift-s ...

javascriptjqueryhtmlshopify

What is the best way to mark a MenuItem as active within a Material UI Drawer component?

Here is the code snippet I am working with: <Drawer docked = {false} width = {330} open = {this.state.drawerOpen} onRequestChange = {(drawerOpen) => this.setState({drawerOp ...

cssreactjsecmascript-6material-ui

Prevent the afterTagAdded event from being triggered when loading pre-added elements through Ajax using the Tag-it plugin

Here's my dilemma - when I click a button, I load <ul id="members"> <li>member1</li> <li>member2</li> </ul> (the ul is placed inside the .modal-body) via ajax, with pre-existing list elements. After th ...

javascriptjqueryhtmlajax

Learn how to implement a rotation effect on a pseudo-element in ReactJS with clickable functionality, specifically designed for SVG

[images for my project] [1]: https://i.sstatic.net/a6EFH.png [2]: https://i.sstatic.net/lMhNu.png Clicking on the orange arrow should trigger a 180-degree rotation. Can this be achieved using CSS or do I need to utilize JavaScript? Also, how can I dec ...

javascriptcssreactjscss-selectorspseudo-element

Can a single SVG file be referenced and reused multiple times in a project?

Instead of repeating these code blocks: <svg class="icon-user"> <use href="LONGFILENAME.svg#icon-user"> </use> </svg> <svg class="icon-user2"> <use href="LONGFILENAME.svg#icon-user2"> </use> </ ...

htmlcsssvg

The issue of a malfunctioning Customized Bootstrap Carousel when used with flex and gap is causing

I have created a unique bootstrap carousel where instead of displaying one div, I showcase three (one in the middle and half of each on the sides). The issue arises when I add borders to my divs and attempt to create spacing between them using display: fle ...

csssassbootstrap-5

What is the best way to apply a CSS class to a div element without affecting its child elements using JavaScript?

Currently, I am using JavaScript to add and remove a CSS class through a click event. Within my div structure, I have multiple similar divs. While I can successfully add and remove the class from my main div, I am facing an issue where the class is also ap ...

javascripthtmlcss

Using `vertical-align` on a `span` inside a flexbox container may not produce the desired result

Some users are experiencing issues with the vertical-align: middle property not working on a span. .tc__timezone-toggle { display: flex; } .tc__timezone-toggle span { vertical-align: middle; } .tc__timezone-toggle-ui { display: block; font-wei ...

htmlcssflexbox

What is the method for toggling Bootstrap toggles based on a specific condition?

Bootstrap Toggle: Is there a way to control the state of 7 other toggles (labeled: Sunday -> Saturday) based on the toggle state of one checkbox? I have tried using click events and toggle functions, but it doesn't seem to be enough. How can this ...

jquerybootstrap-4

Can you customize the "rem" values for individual Web Components when using Angular 2's ViewEncapsulation.Native feature?

I'm interested in creating a component with ViewEncapsulation.Native that utilizes Bootstrap 4 while others are using Bootstrap 3. Below is the component code with Bootstrap 4: import { Component, ViewEncapsulation } from '@angular/core'; i ...

csstwitter-bootstrapangularweb-componentbootstrap-4

Background and checked styles for radio buttons

Thank you in advance for any assistance you can provide. I am looking to create a unique radio button design. When the radio button is not checked, I want it to display as a simple white circle. However, once it is checked, I would like it to appear eithe ...

cssreactjsmaterial-ui

Creating a JSON array using looping technique

I am attempting to construct a JSON array using a loop where the input className and value will serve as the JSON obj and key. However, I am facing difficulties in creating one and cannot seem to locate any resources on how to do so. Below is an example sn ...

javascripthtmlarraysjsonobject

How can I display two slides at once in Ionic 2/3 on a wide screen?

I have been searching for a solution that will allow me to display 1 ion-slide if the device screen is small, but if it's larger, then I want to display 2 ion-slides. Unfortunately, I have not been able to find a suitable solution yet. As an example, ...

javascripthtmltypescriptionic2ionic3

SCORM: moving between SCOs by clicking a button in the presentation

Currently, I am developing a website that allows users to create presentations. One of the website's features is the ability to export presentations in SCORM format (either 1.2 or 2004). This is my first time working with SCORM and I am currently impl ...

javascriptjqueryhtmlscormpresentation

Not implementing auto-scroll feature because of the presence of `position: sticky` or `position: fixed` CSS properties

I'm encountering a console warning while working on my Nextjs project. Here is the snippet of my code: <aside className={`site-off desktop-hide ${showMenu ? "show-menu" : ""}`}> .... </aside> And here is the relevant ...

cssnext.js

Struggling to design a form to incorporate changing weekly elements into a homepage

Hey, I'm looking to simplify my life by creating a form that allows me, as the administrator/creator, to easily update a group of weekly variables from datalists without needing to manually change the code every time. <form method="post" action= ...

phphtml

In Internet Explorer 8, the jQuery UI Tooltip is closing abruptly

Scenario We are encountering an issue with a jQuery UI tooltip that is triggered by a mouseenter event on the <div class="fieldset"> (.fieldset) element within a form. The problem arises in IE8, where the tooltip disappears immediately upon hovering ...

javascriptjquerycssjquery-uiinternet-explorer-8