Utilize Flexbox to position a group of items in the center of the page, while placing a single item at the bottom for added emphasis

I have utilized Bootstrap 4 along with some custom CSS to create a hero section where all items are centered both horizontally and vertically.

The only exception is one item that I want to align at the bottom of the page while still keeping it centered horizontally.

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
a.inherit {
  color: inherit;
}
a.nounderline, a.nounderlie:hover {
  text-decoration: none;
}
.page-wrapper {
  min-height: 100%;
}
.hero {
  height: 100vh;
  overflow-y: hidden;
  padding-top: 3rem;
  padding-bottom: 3rem;
  justify-content: center;
  align-items: center;
}
.hero img {
  width: 100%;
}
.hero.type-text h1 {
  color: #000;
}
.hero.hero-short {
  max-height: 768px;
}
section.type-text h3 {
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 0;
}
section.type-text h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 1.5rem;
}
section.type-text p {
  font-weight: 500;
}
.allcases {
  text-align: center;
  font-weight: 700;
  margin-top: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-wrapper">
  <section class="container d-flex hero type-text">
    <div>
      <h4 class="text-center m-0">Next item</h4>
      <h1 class="display-1 text-center">
        <a class="inherit nounderlie" href="#">Lorem</a>
      </h1>
    </div>

    <p class="allcases">
      <a class="inherit" href="#">See all items</a>
    </p>
  </section>
</div>

The "See all items" link stays at the bottom (thanks to margin-top: auto), but it is not centered. Changing the flex-direction from row to column disrupts the entire layout, so that is not a viable solution.

What is the best way to center the item vertically and align it at the bottom of the page?

cssflexboxbootstrap-4

Answer №1

To achieve the desired layout, it is recommended to use flex-direction: column. This approach allows for easy vertical centering of items. Using the row layout for horizontal centering is not efficient in this case. Alternatively, consider utilizing margins instead of flex. If opting for flex-direction: row, the use of position: absolute or negative margins may be necessary, although this is not recommended as flex-direction: column can easily accomplish the desired result.

By simply changing 2 properties, the layout can be adjusted. See the achieved result https://i.sstatic.net/btVjF.png

Update the styling as follows:

// Add flex-direction: column to the hero class
.hero {
  height: 100vh;
  overflow-y: hidden;
  padding-top: 3rem;
  padding-bottom: 3rem;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

// Target the first div within the hero class
.hero > div { 
  margin-top: auto;
}

Answer №2

The solution is quite straightforward. Adjust the flex-flow property of your container to column.

flex-flow: column;

Now you have two flex items: The div, which contains your title and other links, and the footer p. The key is to make the div grow while keeping the p tag the same size. So, set 

flex: 1 auto;

for the div and 

flex: 0 auto;

for the p tag. After making these adjustments, also include 

display: flex; 
justify-content: center; 
flex-flow: column;

for the div to make it a flex container itself. The p tag doesn't need any more changes, you can even remove any unnecessary margins.

These modifications should resolve the issue.

Answer №3

To ensure proper wrapping and define the width of the div to be positioned at the top, you can follow these steps:

For enabling wrapping, apply a class to the element:

 <section class="container d-flex hero type-text flex-wrap">

To target the div specifically, you can use the following CSS:

.hero>div {
  width:100%;
}


html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
a.inherit {
  color: inherit;
}
a.nounderline, a.nounderlie:hover {
  text-decoration: none;
}

.hero {
  height: 100vh;
  overflow-y: hidden;
  padding-top: 3rem;
  padding-bottom: 3rem;
  justify-content: center;
  align-items: center;
}
.hero>div {
  width:100%;
}
.hero img {
  width: 100%;
}
.hero.type-text h1 {
  color: #000;
}
.hero.hero-short {
  max-height: 768px;
}
section.type-text h3 {
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 0;
}
section.type-text h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 1.5rem;
}
section.type-text p {
  font-weight: 500;
}
.allcases {
  text-align: center;
  font-weight: 700;
  margin: auto auto 0 auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-wrapper">
  <section class="container d-flex hero type-text flex-wrap">
    <div>
      <h4 class="text-center m-0">Next item</h4>
      <h1 class="display-1 text-center">
        <a class="inherit nounderlie" href="#">Lorem</a>
      </h1>
    </div>

    <p class="allcases">
      <a class="inherit" href="#">See all items</a>
    </p>
  </section>
</div>

Alternatively, you can utilize the flex-column class like so:

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
a.inherit {
  color: inherit;
}
a.nounderline, a.nounderlie:hover {
  text-decoration: none;
}

.hero {
  height: 100vh;
  overflow-y: hidden;
  padding-top: 3rem;
  padding-bottom: 3rem;
  justify-content: center;
  align-items: center;
}

.hero img {
  width: 100%;
}
.hero.type-text h1 {
  color: #000;
}
.hero.hero-short {
  max-height: 768px;
}
section.type-text h3 {
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 0;
}
section.type-text h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 1.5rem;
}
section.type-text p {
  font-weight: 500;
}
.allcases {
  text-align: center;
  font-weight: 700;
  margin: auto auto 0 auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-wrapper">
  <section class="container d-flex flex-column hero type-text ">
    <div>
      <h4 class="text-center m-0">Next item</h4>
      <h1 class="display-1 text-center">
        <a class="inherit nounderlie" href="#">Lorem</a>
      </h1>
    </div>

    <p class="allcases">
      <a class="inherit" href="#">See all items</a>
    </p>
  </section>
</div>

In both scenarios mentioned above, the margin for allcases is adjusted to:

  margin: auto auto 0 auto;

This ensures it stays at the bottom of the container regardless of the flex-direction setting.

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

How to display a video with full height and width using CSS or JavaScript

I am trying to incorporate an html5 video (using the video tag) with 100% width and 100% height to play in the background. I have seen an example using an image, but I want to achieve the same effect with a video. Here is the code I have so far: #video { ...

javascriptcsshtml

Drag near the bottom of a droppable DIV to scroll inside

Within a scrollable div, I have multiple draggable divs. However, when I drag them into another scrollable div (the droppable zone), only the page scrolls and not the droppable div itself. How can I make it so that only the droppable div scrolls while drag ...

javascriptjquerycssdrag-and-drop

Can a viewport be designed with a minimum width?

<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" name="viewport"> When viewing a website on a normal desktop, the window width is typically 1000px or more. However, on an iPhone, it's important to ensur ...

iphonecss

What is the process for integrating CSS-styled text into CKEditor?

Currently, I am developing plugins that are designed to incorporate various elements like images and tables into the editor. My objective is to be able to view these elements in their final visual form within the editor itself. To achieve this, I plan on a ...

cssckeditor

Avoid letting words be separated

My question involves HTML code <div class="col-md-4">...</div> <div class="col-md-4">...</div> <div class="col-md-4">Lorem Ipsum</div> When I view this on a mobile device, the text appears as follows: Lorem Ip- sum I ...

htmlcss

Troubleshooting Symfony2 and Assetic: Why are my CSS-linked images not loading?

I've encountered an issue with my CSS sprite sheet that my CSS file seems unable to locate the image. Despite following the provided solution here, I'm still facing the same problem. The directory structure of my bundle is as follows: src/ v ...

csssymfonycss-spritesassetic

Easy fix for 3 circles (images) placed in a row with equal distance between them and perfectly aligned

I've been spending the last 3 days trying to accomplish this specific task: 3 circular images arranged horizontally with equal spacing Occupying 70% of the central screen area Height and width based on percentages for browser resizing adjustment It ...

htmlcssflexbox

Transforming the header to function similarly to the address bar in the Google Chrome mobile app

I have managed to create a fixed header that appears when the user scrolls up and disappears when they scroll down. However, I want it to behave like the address bar on the Google Chrome mobile app - remaining stationary until the top of the window reaches ...

jqueryhtmlcss

retrieve the image name of the background using jQuery

How can I use jQuery to extract only the background image name from a div with a background image? I currently get 'http://localhost/xampp/uconnect/images/tour-networks-ss.png' but I only want 'tour-networks-ss.png' Any assistance wi ...

jqueryhtmlcss

Utilizing CSS to Properly Position HTML Elements

Check out my code on jsFiddle I'm facing some challenges in positioning HTML elements using CSS. While I grasp the fundamental concepts of block and inline elements, implementing them in real coding scenarios can be confusing. I've shared my HTM ...

htmlcss

How can a borderless text field be created using Material UI?

Today, I delved into using Material UI for my React project. My goal is to create a registration form similar to this one. Essentially, I want 5 input text fields without any borders and with a simple background color effect when active. However, I'm ...

cssreactjsmaterial-ui

Utilizing Jquery to pass two classes along

I am looking for assistance on how to pass multiple classes within if-else statements and jQuery. My goal is to have both divs and divs2 change when the next button is clicked. Can someone please provide guidance on achieving this? --code not mine-- ...

javascripthtmljquerycss

Can JavaScript be utilized to dynamically adjust the size of all elements on the screen to a specified percentage of their initial height and width when a certain event occurs?

I'm fairly new to the world of JavaScript, but I have a basic understanding of it. I want to optimize my personal website for mobile devices. I've already taken care of screen orientation and element positioning, everything is centered nicely and ...

javascripthtmlcssresize

Effortless pagination across various pages, utilizing diverse CSS selectors

I've integrated simple pagination into my website, but I've encountered a issue. My navigation consists of CSS tabs, each holding a unique pagination component. Here is the jQuery pagination code snippet: $(function(){ var perPage = 8; var open ...

javascriptjqueryhtmlcsspagination

Disabling the strong pressure effect on Safari for iPhone 6s: A step-by-step guide

How can I prevent the peak effect (strong pressure's impact with Safari on iPhone 6s) on the "a" element in this code (bootstrap environment)? <article> <div class="gall-thumbnail"> <a data-toggle="modal" href="mod1#"> ...

csstwitter-bootstrapiphone-63dtouchpeek-pop

Random variable without repetition in SASS

I have a unique project where I am tasked with incorporating a list of 5 specific colors into 10 different div elements. The challenge is that each color must be used twice and in a completely random order without any repetition of colors. Although utilizi ...

cssrandomsassrepeat

Dynamic CSS class alteration on scrolling using Vue.js

I am currently in the process of developing a web application using vueJs and bootstrap. I am interested in figuring out how to dynamically change the CSS class of an element based on scrolling behavior. Is there a vue-specific method that can achieve this ...

htmlcsstwitter-bootstrapvue.js

Tips for customizing the focus style of a Text Field in Material-UI

My current Search box design is represented in the following image: https://i.sstatic.net/VuKIp.png I am looking for ways to customize the background color, border, and icon of the search box when it is focused. Additionally, I would like to know how to m ...

htmlcssreactjsmaterial-ui

What is the best way to modify CSS animation property without causing any disruptions?

Could you help me with modifying this CSS animation? I want to adjust the animation-iteration-count to 1 only when a certain property, status, is added to the element. Currently, the animation is not working as expected. For example: setTimeout(() => ...

htmlcss

The JQuery chosen dropdown experiences a visual issue when placed inside a scrollbar, appearing to be "cut

Good day, I've been using the jQuery "chosen" plugin for a dropdown menu, but I encountered an issue with it being located in a scrollable area. The problem is that the dropdown items are getting cut off by the outer div element. I have provided a si ...

javascriptjqueryhtmlcss