Why is align working fine while justify-content is experiencing issues?

When I try to center items vertically using the justify-content property with the flex-column applied, the align-items works correctly but the content doesn't respond on the Y axis. I have the align-items commented out because I only want to center on the Y axis, not the X axis.

.img1-container {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  height: 100%;
}

.web-dev {
  display: flex;
  font-size: 60px;
}

.john-sass {
  display: flex;
  font-size: 48px;
  margin-left: 38.5%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="img1">
  <div class="container img1-container d-flex flex-column justify-content-center">
    <h1 class="into-text web-dev"> Front-End Web Developer</h1>
    <h4 class="into-text john-sass">John Sasser</h4>

  </div>
</div>

cssbootstrap-4

Answer №1

To achieve the desired layout, proper div management is necessary. Here is a sample code snippet:

.img1 {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.container {
  display: table-cell;
  vertical-align: middle;
}

.content{
  margin-left: auto;
  margin-right: auto;
  width: 400px;
}

  
    <div class="img1">
        <div class="container img1-container d-flex flex-column justify-content-center">
          <div class="content">
            <h1 class="into-text web-dev"> Front-End Web Developer</h1>
            <h4 class="into-text john-sass">John Sasser</h4>
         </div>
        </div>
    </div>

Answer №2

To achieve the desired layout, simply include justify-content: space-between; in your .img1-container class, instead of using justify-content: center;

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .img1-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: gray;
    padding: 30px 0px;
  }

  .web-dev {
   font-size: 60px;
 }

 .john-sass {
   font-size: 48px;
 }
<div class="img1">
    <div class="container img1-container d-flex flex-column justify-content-center">
      <h1 class="into-text web-dev"> Front-End Web Developer</h1>
      <h4 class="into-text john-sass">John Sasser</h4>

    </div>
  </div>

Answer №3

Everything seems to be functioning correctly using align-items: center;. It might not be immediately obvious, but it's working as intended. Check out this working example and let me know if anything is missing: https://codepen.io/shivam1100/pen/yLymveb?editors=1100

Answer №4

My design utilizes a full 100% width and a 100% view height.

.img1{
  width: 100%;
  height:100%;
}

.img1-container{
  height:100vh;
  display: flex;
  flex-direction:column;
  align-items:center;
  text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="img1">
  <div class="container img1-container">
    <h1 class="into-text web-dev">Front-End Web Developer</h1>
    <h4 class="into-text john-sass">John Sasser</h4>
  </div>
</div>

Answer №5

Adding a height to the img1-container resulted in unexpected behavior. It seems like the height property is causing issues with the flexbox code.

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

Switch up the arrangement of layout rows and columns using Bootstrap and CSS

On my desktop screen, the order of cols in Bootstrap is as follows: COL-A COL-B COL-C <div class"container"> <div class="row"> <div class="col-lg-4 col-md-4">Text 1</div> <div class="col-lg-4 col-md-4"><img sr ...

cssbootstrap-4

What is the best way to eliminate all styles from an element with jQuery?

body{ font-family: Arial; } div{ color: red; margin: 20px; background: blue; font-size: 17px; } <div id="div1">this should be styled with a blue background, red text, and 17px Arial font</div> <div id ...

jqueryhtmlcss

`Problem with the layout of the form on the website`

Experiencing some challenges with the container design for a job sheet project. As a beginner, I have been learning on the fly and following online tutorials to create functional forms. However, this particular form is not rendering correctly when viewed o ...

htmlcssflexboxalignmentcentering

Tips for preventing H1 from taking up the entire div

I'm currently working on developing a new theme for my WordPress website. One issue I've encountered is that the h1 element is causing the top menu to appear below it instead of on the same line. Can anyone help me overcome this challenge? Here& ...

phphtmlcsswordpress-theming

The process for incorporating two distinct Google fonts into a Next.js project using Material UI

Currently in the process of upgrading my MUI5 application from Next 12 to Next 13 and experimenting with integrating next/font. In my previous Next 12 version, I utilized two Google fonts - 'Rubik' and 'Ephesis' which were included in t ...

cssnext.jsmaterial-uifonts

Is there a way to prevent tags from wrapping and showcase them all in a single line when utilizing the jQuery select2 plugin?

I have a requirement to prevent tags from wrapping and instead display them in a single line using the jQuery TagIt plugin. Check out my preview: https://i.stack.imgur.com/lYhsi.png My goal is to have all the tags displayed on a single line without wra ...

javascripthtmljquerycssjquery-select2

Position three paragraphs in the center of a div container

Is there a way to center 3 paragraphs in a div? I have separate divs for each paragraph and one main div that holds all three nested divs. div.first { font-family: 'Kanit', sans-serif; color: aliceblue; width: 30%; float: left; ...

htmlcss

The placement of the div only shifts in Firefox

Looking to place a small 25px - 25px image at the end of a line of text? Using a DIV (re1DOC) to position the element can make it easier. However, the issue arises when the element displays correctly in IE & Chrome, but not in Firefox. The text shifts slig ...

htmlcss

Personalizing Bootstrap Styles Using Sass

As a newcomer to Bootstrap 5 and Sass, I have been thoroughly enjoying the learning process. However, I have a couple of questions that have come up along the way... When it comes to customizing Bootstrap Sass, I understand the concept of variable overrid ...

htmlcsssassbootstrap-5

The "Product URL" in Woocommerce is overlapping with the "Add to Cart" button

Hey, I've encountered a strange issue. I just realized that when I go to my store, the "add to cart" button is overlapping with the product info URL. To better illustrate this problem, please see the images below: https://i.sstatic.net/mkQ8h.png Whe ...

phpcsswordpresswoocommerce

What is the best way to ensure that the background of my sticky table th stays in place and does not scroll away

I have a dynamic table where the table body rows are loaded dynamically. The wrapper uses Bootstrap5's overflow-scroll feature to keep the table at a fixed height and scroll if there are too many rows. I managed to make the table head sticky, but had ...

htmlcssbootstrap-5

Aligning content within a div block

I created a div block that houses a form structured like this: <div class="divClass"> <form id="frm" method="post" action="/NotDefinedYet/index.xhtml" class="frmClass"> <input type="text" name="j_idt9:j_idt10:Username" placehold ...

htmlcss

What could be causing the excessive vertical spacing in an HTML list on Chrome: PHP output or CSS styling?

I'm having difficulty understanding why there is a significant vertical offset (around 170px) between one <li> element and the next. This issue seems to only occur in Chrome and not in Firefox, specifically within <li> elements when PHP co ...

phphtmlcsswordpress

The Bootstrap nav-justified feature fails to utilize the entire width available

Have you heard of the bootstrap-4 class called nav-pill? It's meant to make links have equal width and occupy all horizontal space. To achieve equal-width elements, simply use .nav-justified, as suggested. This will ensure that nav links take up al ...

htmlcssbootstrap-4navjustify

When bootstrap is imported, SVG is displayed with a square background

The combination of reactJS and bootstrap has caused an unexpected issue for me. After importing bootstrap, strange squares have started to appear behind my SVG images... https://i.sstatic.net/4vmP8.png Is anyone familiar with what is causing this and ho ...

cssreactjssvgbootstrap-5

Locating error messages in Selenium WebDriver: mastering xpath and css selectors

Test scenario: 1. Visit the [example test URL] : 2. Scroll to the bottom of the page and observe the Facebook comment module. 3. Without signing into Facebook, click 'Comment using' button and select 'Facebook' from the dropdown menu. ...

cssseleniumxpathautomationwebdriver

Streamlining Tailwind CSS styles in your React/Next.js components for maximum efficiency

Since implementing Tailwind CSS in my React/Next.js project, I've noticed a decrease in maintainability compared to using traditional CSS or styled-components. Previously, I could easily consolidate style changes, but now I find myself duplicating cla ...

cssreactjsnext.jstailwind-css

"Enjoy a full-screen background that adjusts its height while you scroll

Here is how my HTML elements are nested: body { app-root { app-block-page { app-block-content { div.wrapper { *content* } } } } } body has width:100% and ...

htmlcssscrollbackground-color

Ways to initiate a flip motion

Looking for a way to create a flip image effect when clicked by the user. Here is the code I have so far: let img = document.querySelector('img') let div; let click = 0; img.onclick=function(){ console.log(click) if(click %2 ==0){ d ...

javascripthtmlcss

Display the scrollbar on a flexbox container instead of the entire browser window

I'm curious about how to implement a scroll-bar on a div using flexbox CSS. To better illustrate the issue, I've provided an example below: * { box-sizing: border-box; } .flex-display { display: flex; align-items: stretch; height: 100 ...

htmlcssflexbox