Learn how to use CSS flexbox to easily vertically center items within a container with a full-height background

I'm having trouble with aligning text vertically centered within a box and making sure the background color stretches to full height.

HTML:

<div class="feature-content">
<div class="feature-visual">
    <div class="embed-container">
        <iframe src="https://player.vimeo.com/video/214852366?controls=0&amp;hd=1&amp;autohide=1" title="Factory Pattern &amp; REHAU" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" width="640" height="312" frameborder="0"></iframe>
    </div>
</div>
<div class="quote">
    <div class="words">Improved our conversion rates to a level that far surpassed expectation.
    </div>
</div>

CSS:

article section.case-study .feature-content {
    align-items: stretch;
    align-content: stretch;
    display: flex;
    padding-top: .35em;
}
article section.case-study .feature-content .feature-visual {
    flex-grow: 1;
    flex-basis: 65%;
}
article section.case-study .feature-content .quote {
    align-self: stretch;
    background: #db6f72;
    color: #FFF;
    flex-basis: 35%;
    flex-grow: 1;
    position: relative;
}
article section.case-study .feature-content .quote .words {
    font-family: "Georgia", serif;
    font-size: 2em;
    font-style: italic;
    line-height: 1.5;
    padding-top: 4.5em;
    width: 80%;
}

Check out the current live version here

Here's an image of what I am trying to achieve: enter image description here

Any help would be greatly appreciated :)

cssflexbox

Answer №1

If you want to center the content vertically in the right block (the one that contains the text quote), you can use a CSS rule like this:

article section.case-study .feature-content .quote {
    [ ... original settings remain unchanged ... ]
    display: flex;
    flex-direction: column;
    justify-content: center;
}

Also, don't forget to remove the padding-top from the following rule to prevent any vertical offset from the center:

article section.case-study .feature-content .quote .words {
    font-family: "Georgia", serif;
    font-size: 1.85em;
    font-style: italic;
    line-height: 1.3;
    /* padding-top: 1.25em; */ --> remove / set to zero
    width: 80%;
}

Answer №2

To achieve perfect alignment of the items in your .quote container to the center, you must make the following adjustments:

  • Start by eliminating padding-top:4.5em from your .words CSS as this will cause the Y-offset to shift downwards.

  • Next, switch the display property of .quote to flex and utilize the align-items attribute to vertically centralize the .word container within your .quote container. 

    (display:flex;  align-items:center;) in .quote

.feature-content {
  align-items: stretch;
  align-content: stretch;
  display: flex;
  padding-top: .35em;
}

.feature-visual {
  flex-grow: 1;
  flex-basis: 65%;
}

.quote {
  align-self: stretch;
  background: #db6f72;
  color: #FFF;
  flex-basis: 35%;
  flex-grow: 1;
  position: relative;
  display:flex;
  align-items: center;
}

.words {
  font-family: "Georgia", serif;
  padding-left:2em;
  font-size: 2em;
  font-style: italic;
  line-height: 1.5;
  width: 80%;
}
<div class="feature-content">
  <div class="feature-visual">
    <div class="embed-container">
      <iframe src="https://player.vimeo.com/video/214852366?controls=0&amp;hd=1&amp;autohide=1" title="Factory Pattern &amp; REHAU" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" width="640" height="312" frameborder="0"></iframe>
    </div>
  </div>
  <div class="quote">
    <div class="words">Improved our conversion rates to a level that far surpassed expectation.
    </div>
  </div>

Answer №3

To achieve the desired layout, you have the option to utilize flexbox or a straightforward transform technique:

article section.case-study .feature-content .quote .words {
    font-family: "Georgia", serif;
    font-size: 2em;
    font-style: italic;
    line-height: 1.5;
    padding-top: 4.5em;
    width: 80%;

    // Include these 3 properties:
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Answer №4

To get the desired effect, you can adjust your css like so: 

article section.case-study .feature-content {
    align-items: stretch;
    align-content: stretch;
    display: flex;
    padding-top: .35em;
}
article section.case-study .feature-content .feature-visual {
    flex-grow: 1;
    flex-basis: 65%;
}
article section.case-study .feature-content .quote {
    display: flex;
    align-items: center;
    align-self: stretch;
    background: #db6f72;
    color: #FFF;
    flex-basis: 35%;
    flex-grow: 1;
    position: relative;
}
article section.case-study .feature-content .quote .words {
    font-family: "Georgia", serif;
    font-size: 2em;
    font-style: italic;
    line-height: 1.5;
    width: 80%;
}

I included display: flex and align-items: center within .quote to achieve vertical centering and eliminated padding-top from .words to remove any vertical spacing.
Note: When flex-direction is set to row, align-items handles vertical alignment while justify-content controls horizontal alignment; this behavior is reversed when flex-direction is set to column.

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

Ensure that the placeholder remains visible as you type in the input field

Is there a way to implement an input text field in React with the placeholder "DD-MM-YYYY," that partially disappears as I start typing? For example, when I type "02-," only "-MM-YYYY" should remain visible as part of the placeholder. ...

javascripthtmlcssreactjsmaterial-ui

What is the best way to showcase a ul element as inline-block?

Is there a way to keep the bottom menu aligned in one row on all screen sizes? I attempted using display: inline-block, but it doesn't seem to work for me. Below is the CSS code: footer #middle-footer { background: #F6F6F6; color: #000; font-size ...

htmlwordpresscsshtml-lists

Vertical Alignment of Navigation Bar in Bootstrap 4

I am trying to align the center of my navigation bar using the "Cover" Bootstrap 4 template. Please find the current code provided below. <div class="cover-container d-flex h-100 p-3 mx-auto flex-column"> <header class="masthead mb-auto"> ...

htmlcssbootstrap-4navbarcenter

The content on my HTML webpage exceeds the width of the screen on mobile devices and certain PCs

I've exhausted most of the solutions available online, yet I haven't been able to resolve the issue. The content on my webpage is appearing wider than the screen size on mobile devices and some PCs URL: html, body,{ max-width: 100%; ...

htmlcssresponsive-designoverflow

Using CSS to position elements absolutely while also adjusting the width of the div

In one section of my website, I have a specific div structure. This structure consists of two divs stacked on top of each other. The first div is divided into two parts: one part with a width of 63% and another part with a button. Beneath the first div, t ...

javascriptjqueryhtmlcss

The CSS property 'clear:both;' is not functioning properly on IE7 browsers whereas works fine on IE8/IE9, Firefox, Chrome, and other browsers

I have been receiving feedback from visitors about some issues on one of my websites. Those who reached out to us are using IE7 on Windows XP. I was able to recreate the problem by using IE7 or by mimicking it in compatibility mode with IE7 document mode o ...

htmlcssinternet-explorer-7typo3

Having difficulty viewing the images clearly

My JavaScript codes for scrolling images are not displaying all the images when viewed on Google Chrome. Is there a solution available? Below is the included JS code and CSS. data=[ [" images/img1.jpg"," Image1","pic01.jpg"], [" images/img2.jpg","Image2 " ...

javascriptcss

When anchor links (href) are incorporated within a flex layout and flex-direction is set to row, they may not function as

I've designed a website with three horizontal pages, each filling the entire screen. There's a fixed menu with links that scroll to specific pages when clicked. However, users can also scroll horizontally to navigate between screens. If two page ...

htmlcssflexbox

The issue with data targeting in Bootstrap 3 persists

header.php code <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> <html lang="EN"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=UT ...

phphtmlcss

Stop automatic scrolling when the keyboard is visible in Angular

I have created a survey form where the user's name appears on top in mobile view. However, I am facing an issue with auto scroll when the keyboard pops up. I want to disable this feature to improve the user experience. <input (click)="onFocusI ...

cssangulartypescriptforms

Tips for Placing a Div in a Precise Location

I'm currently working with Bootstrap and I'm attempting to replicate a layout similar to the one used by Twitter, as shown in the screenshot below. The specific part I'm struggling with is where the profile picture is located. I want to add ...

htmlcsstwitter-bootstrap

Missing sidebar display

Hi there! I am having an issue with my sidebar not appearing correctly when I click on the toggle button. It seems to be moving to the side, but the sidebar itself is blank or transparent. I suspect that the problem lies within my JavaScript file. As a beg ...

javascripthtmlcssnavbarsidebar

Adjusting the border-right size based on scroll position

Apologies if this question seems trivial, but I am completely new to coding in HTML and JavaScript. I understand that I can make some changes based on scroll position, but right now I'm a little confused. I want to increase the height of a box as the ...

javascripthtmlcss

The color of the text on the Homepage appears differently on iOS Safari

At the top of my homepage, I have displayed the company phone number with white text color. It appears correctly as white on my desktop browsers (Firefox and Chrome), also on my Droid phone, but shows up as dark gray on my iOS phone using Safari. Why is th ...

htmlioscsscolorssafari

How can I incorporate Bootstrap/Semantic UI into an Express project without relying on external CDNs

After downloading the minified version of Bootstrap and placing it in the root directory of my project, I added the following code to a HTML file located in /views/: <link rel="stylesheet" href="/bootstrap.min.css"> Despite this, the page remained ...

cssnode.jstwitter-bootstrapexpress

React component utilizes Material UI to detect scrolling within a table

Currently, my table's body size is set to fixed dimensions in accordance with Material UI guidelines. I am looking to implement a functionality that allows me to dynamically load more rows as the user scrolls through the table. Can you recommend the ...

javascripthtmlcssreactjsmaterial-ui

:last-child is effective, but :first-child is inefficient

I'm having trouble using CSS to hide the first .sku element within an aside that contains two of these elements. Strangely, the :last-child selector works just fine. Can anyone explain why this might be happening? Here's a link to the JSFiddle fo ...

csshtmlcss-selectors

Scrolling to does not function properly with Material UI tabs

Looking for a solution to scroll to a specific div when clicking on a tab in Material UI Tabs using UseRef and ScrollTo. Check out the sandbox link here: https://codesandbox.io/s/exciting-sound-mrw2v Currently, when I click on Tab 2, I expect it to autom ...

javascriptcssreactjsmaterial-ui

Preview images in the Image Carousel bullet lineup

I've created an awesome image carousel using HTML and CSS. The carousel includes three bullets at the bottom that display a preview image when hovered over. Currently, there is a transition effect as the picture slides up and down. Is there a way to m ...

htmlcss

Establish a vertical column that matches the height of its parent element

Is there a way to create a column that matches the height of its parent element? I have a navbar followed by a container with three columns. The challenge is to make the last right column the same height as its parent and also scrollable. In this scenario, ...

htmlcsstwitter-bootstrap