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

Two challenges I encountered with my CSS dropdown menu bar

I've been working on a CSS top dropdown navigation bar, but I'm encountering two issues that I can't seem to resolve. The first problem is that my nav div either extends too far down or my 1px right border tabs aren't reaching the botto ...

htmlcss

Is it just me, or does `position: fixed;` not actually fix the element to the top?

I'm experiencing an issue where the element isn't fixed to the top of the page, despite using the position: fixed; property. I've tried several solutions including: Setting a z-index of 9999 Wrapping all elements in a single container (.fi ...

htmlcss

The header logo will have an absolute position to overlay the navigation menu when the screen is resized

I am currently working on a website layout that involves using position: absolute for the logo to overlay another div below it, purely for stylistic reasons. While I have achieved this effect, it doesn't translate well into responsive web design. When ...

htmlcss

The Angular material datepicker fails to organize items in a horizontal row

My web application features an Angular Material datepicker, however, I am facing an issue where not all elements are showing up in a row. The view is as follows: Datepicker To prevent any custom CSS from impacting the view, I have removed all customized ...

cssangularangular-materialdatepicker

Optimizing CSS With jQuery During Browser Resize

I am currently facing an issue with recalculating the height of the li element during window resizing or scrolling. Strangely, on page load, the height is no longer being re-calculated and set to the ul's child height. Here is the code I have written ...

javascriptjquerycss

What causes the "v-col" width to suddenly alter after adding the "bg-red rounded" class?

I'm struggling to organize the data into blocks using Vuetify. When I apply the "bg-red rounded" class to the "v-col", it alters the width of the column, resulting in an undesired grid structure. Here is the template section of my Vue file. Some data ...

cssvue.jsvuetifyjs3

There seems to be an issue with the functionality of the JavaScript Quiz as it is

While working on my JS quiz, I encountered an issue where some answers were not displaying due to quotes and the need to escape HTML characters. Additionally, I am facing difficulty in accurately awarding points or deductions based on user responses. Curre ...

javascripthtmlcss

Achieving the perfect overlay and centered image effect using CSS

I am attempting to design a banner consisting of 3 images, each with dimensions of 900x420, similar to the image shown below. I am looking for advice on how to align these images such that they are horizontally centered. Any suggestions would be greatly ap ...

htmlcsstwitter-bootstrap-3

Refresh a particular element using javascript

I'm new to Javascript and I am trying to refresh a specific element (a div) using only Javascript when that div is clicked. I came across the location.reload() function, but it reloads the entire page which doesn't fit my requirements. Upon clic ...

javascripthtmlcssreload

Comparing Embedded and Linked JS/CSS

In my experience, I understand the advantages of using linked CSS over embedded and inline styles for better maintainability and modularity. However, I have come across information suggesting that in certain mobile web development applications, it may be m ...

javascripthtmlcss

"I am facing an issue where the button does not appear centered after using jQuery

I can't help but notice that when applying CSS directly, my buttons end up centered horizontally. Yet, when I insert the same code using append(), the buttons seem to align towards one side instead. Here is the HTML/CSS code snippet: <div style=" ...

jquerycssappend

Ensure that the assistant stays beneath the cursor while moving it

I am currently working on creating a functionality similar to the 'Sortable Widget', but due to some constraints, I cannot use the premade widget. Instead, I am trying to replicate its features using draggable and droppable elements: $(".Element ...

javascriptjqueryhtmlcssjquery-ui

Achieving vertical centering by adjusting padding within the parent container

I've successfully set up a DIV with a height of 200px and an inner div at 150px, leaving me 50px for the image caption. Now I want to vertically center the text within that remaining 50px. .captioned { width: 300px; height: 200px; display: fl ...

htmlcss

angular-ui-tab-scroll: Odd spacing between blocks and tabs, each separated individually

Greetings! I would like to express my gratitude for this wonderful library! However, I am encountering an unusual issue when trying to wrap a tabset with tabs that are included separately. This can be done either by adding individual tab elements manually ...

javascriptjquerycssangularjstabs

"Steady layout of grid for the navigation bar and

Currently, I am in the process of developing a control panel with the use of HTML and CSS. To structure the page, I opted for a grid layout. However, I encountered an issue where the navbar and sidebar do not stay fixed on the screen despite trying various ...

javascripthtmlcss

An element that stands alone, not contained within another element

When working with the following HTML structure: <div> <span class="style-me">i want to be styled</span> </div> <div class="ignore-my-descendants"> <span class="style-me">i want to be styled but my parent prevent ...

csscss-selectors

Can Antd's Typography.Paragraph be used as a multi-row Menu title?

I am having trouble getting multiple rows to work inside the Antd Submenu. When I select only one row, it works fine. However, when I try to select multiple rows, the ellipsis is not shown at all and the text remains in one row. <SubMenu ...

cssreactjsantd

Interactive text animation triggered by a click

jQuery ( function ( $ ) { console.log(">>Testing animation"); $('a.loveit').on('click',function(event){ event.preventDefault(); var text = $(this).find('div.love-text'); ...

jquerycss

Modify the placeholder color for a disabled Input element to match the overall Mui theme design

I am struggling to change the color of the placeholder text in a disabled input field within my app's theme. Despite attempting to target the MuiFormControl, MuiInputBase, and MuiInput components in my theme.tsx file on CodeSandbox, I have not been su ...

javascripthtmlcssmaterial-uiplaceholder

Adjust the size of the buttons based on the width of the screen

I have successfully implemented a dropdown menu with both text and an icon. However, I am now faced with the challenge of removing the text while retaining the icon when the screen width is reduced to a maximum of 768px. Is it possible to modify the conten ...

htmlcsswidthscreen-size