Using FlexBox for Vertical Alignment of Elements

Experimenting with FlexBox (for demonstration purposes only). I am facing a challenge in vertically centering text within the parent .top-nav-bar. While using justify-content: space-between, I have successfully aligned two elements horizontally, but I am struggling to center .contact and .help vertically inside .top-nav-bar. Every attempt I make seems to push the text to the top edge of the page.

Link To CodePen

HTML:

  header.section1.box
    .top-nav-bar
      .contact
        p Lorem ipsum dolor sit amet
      .help
        p Lorem ipsum dolor sit amet

CSS:

.section1
  background:
    image: url(url/of/image.jpg)
    size: cover
    position: top center
    repeat: no-repeat
    attachment: fixed

.box
  overflow: hidden
  width: 100%
  height: 100vh
  background:
    color: #90281F

.top-nav-bar
  max-width: 1200px
  width: 100%
  height: 40px
  margin: 0 auto
  font-size: 0.813em
  background: pink
  display: flex
  flex-direction: row
  align-items: center
  justify-content: space-between

.contact
  background: red

.help
  background: green
cssflexbox

Answer №1

Every effort to accomplish this task appears to push the text right up to the top edge of the page.

However, that is where .top-nav-bar is located - it's a div with a defined height of 40px in CSS and is positioned at the very top of the HTML page with no content preceding it, ensuring it remains fixed at the top.

If you specify .top-nav-bar { height: 100%; }, then the height of .top-nav-bar will adjust to match its parent container (100vh) allowing for vertical centering of its contents as indicated by align-items: center.

    .section1 {
      background: url(url/of/image.jpg) top center no-repeat;
  background-size: cover;
  background-attachment: fixed;
 }

    .box {
      overflow: hidden;
      width: 100%;
      height: 100vh;
      background:#90281F;
}
    
    .top-nav-bar {
      max-width: 1200px;
      width: 100%;
      height: 100%;
      margin: 0 auto;
      font-size: 0.813em;
      background: pink;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
 }
      
    .contact {
      background: red
 }
    
    .help {
      background: green
 }
  <header class="section1 box">
<div class="top-nav-bar">
  <div class="contact">
<p> Lorem ipsum dolor sit amet</p>
  </div>
  <div class="help">
<p> Lorem ipsum dolor sit amet</p>
  </div>
</div>
  </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

The mobile page is refusing to scroll, causing all the text to bunch up at the top of the screen

After learning HTML/CSS/Js/PhP over a few months, I recently completed my first website. I am facing an issue with one of the pages on my website when viewed on a mobile device. The parallax scrolling header image does not scroll either horizontally or ve ...

htmlcss

Utilizing carouFredsel for thumbnails and compatibility with IE7

I've successfully integrated carouFredSel (using the basic example with next/prev and pagination) on Chrome, Firefox, IE9, and IE8. However, when I tested it on IE7, the plugin didn't seem to work correctly. The list just displayed vertically wit ...

jquerycssinternet-explorer-7implementation

Identify the element with the active class name as the primary focus

Can anyone assist with this issue? Below is an example of the code I am working with: import React, { useRef, useEffect } from "react"; function App() { const inputRef = useRef(null); useEffect(() => { const testElement = document.qu ...

htmlcssreactjsjsx

Modify the hover color of heading 1 only for hyperlink texts

I am attempting to adjust the hover color specifically for text that contains a link. Below is the CSS code I have tried, but it changes the color regardless of whether there are links present or not. h1, h2, h3, h4 { color:#3F3F3F; } h1:hover, h2:hove ...

csshyperlinkcolorshover

Altering the ASP DropDownList's background color solely with CSS modifications

Is there a way to change the background colors of dropdownlists in my C# web app using CSS instead of specifying each one individually? In simpler terms, I'm trying to avoid having to write out code like this for multiple dropdowns: private void For ...

c#cssasp.netdropdownbox

Tips for creating a background image that seamlessly adjusts to various computer screen sizes

I am trying to make sure that an image fills the entire browser window, but unfortunately it has fixed width and height dimensions. Is there a way to adjust this so it displays correctly on screens of different sizes? Can CSS be used to stretch the backg ...

htmlcss

I wonder which Material Design repository is the source of this library

I am attempting to replicate the CSS style used in this particular Material Design-inspired web application: https://i.stack.imgur.com/utalx.png After exploring Materialize CSS and MUI, I have not been able to pinpoint the exact framework responsible for ...

htmlcssreactjsmaterial-design

Best Practices and Tips for Layout Design Using HTML and CSS Grid

As I begin my journey into front-end development, I am currently immersing myself in studying html, css, and vanilla javascript. While things are going well so far, I find myself struggling with understanding the organization of design layouts in general. ...

htmlcssfrontend

MUI provides the flexibility to adjust the opacity separately for Chip labels/icons and backgrounds

My objective is to customize the opacity of label/icon and background in MUI Chip. I want the label & icon to have an opacity of 1, while the background should have an opacity of 0.0571. Technologies used in this project include React, TypeScript, Materia ...

cssreactjstypescriptmaterial-uiopacity

The images in Bootstrap-Grid at 1920 resolution stay compact

Is there a way to make images grow beyond the 1280 resolution? This is how it appears at 1920 resolution https://i.sstatic.net/JmYc7.png And this is at 1280 resolution https://i.sstatic.net/Sk19K.png <div id="logokutu1" class="d ...

htmlcssbootstrap-4responsive-designgrid

The Bootstrap grid feature is malfunctioning on both Codeply and devtools. The dimensions of the <div class="col-lg-3 col-md-4 col-sm-6"> element remain constant despite attempts to adjust them

After experimenting with the viewport meta tag and enclosing it in a div class="container", I found that the issue persists on Codeply and Chrome DevTools. However, when I adjust my browser size, the problem seems to disappear. I also tried using various v ...

cssbootstrap-4viewportbootstrap-5bootstrap-grid

An additional pixel extending the entire width of 100%

I have a textarea that is 680 pixels wide, but I need to make it fluid by using percentages. When I use percentages to achieve a perfect 100% width, it seems to render 1 pixel more than it should. Here is the link to see the issue in action. ...

csswidthrenderingpixelpercentage

Employing JavaScript to display or conceal a <div> element while scrolling

I'm looking to create a customized sticky navigation bar through Javascript, but I have never written my own code in this language before. My approach involves implementing two sticky navigation bars that appear and disappear based on scrolling behav ...

javascriptcss

Avoid choosing the menuItem when clicking on the icon within the Material UI select component

I am trying to create a dropdown menu that allows users to delete items. However, when I click on the delete icon within a menu item, the entire menu item gets selected automatically. How can I prevent this default behavior? Here is my code: { dropd ...

javascripthtmlcssreactjsmaterial-ui

Navigating with Anchors, Styling and jQuery

Firstly: Apologies in advance for any language errors as English is not my native tongue. :) The Scenario Here's the deal: I'm attempting to create a single button that, when clicked by the user, automatically scrolls down to the next DIV. Each ...

javascriptjqueryhtmlcss

The appearance of an SVG image inside an absolutely positioned div varies between Firefox and Chrome

The web page I am working on can be found at the following link: This webpage consists of text and SVG images, with the hex bolts positioned over specific areas of the text. Achieving this effect requires absolute positioning within a relatively positione ...

htmlcsstextflexboxgraphical-logo

Include a CSS file from an external JavaScript file

Is there a way to include an external CSS file in an external JS file? I am trying to reference and load Default.css inside Common.js like the image below shows. Any suggestions are greatly appreciated! BB ...

javascriptcssexternal

Differentiating CSS Styles for Odd and Even Table Elements

I am trying to implement a style where every other row in my table (myrow) has a different background color. However, currently it is only showing the color specified for odd rows. .myrow, .myrow:nth-of-type(odd) + .myrow:nth-of-type(even) ~ .myrow: ...

htmlcss

Using the position property of relative on a DIV element causes a gap to appear between the DIV and the next

Two div elements are placed consecutively. When I move the first div using position: relative and top: -60px, it creates a gap between them. Take a look at this example here: https://codepen.io/dusannis/pen/oNgBpoK If you notice, there is a noticeable ga ...

css

Issues encountered when using Vue Transition in conjunction with v-autocomplete

Attempting to conditionally display or hide a selection text field using Vue's Transition feature, but experiencing an issue where the text field appears and disappears without any transition effect. <template> <Transition v-if="is ...

cssvue.jsvuejs3vuetify.js