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

JavaScript - Image style alterations are not operating as expected

Let me break it down for you: onmouseover="imageOn(bg-index);" onmouseout="imageOff(bg-index);" I've got these two attributes set on a table tagged with ID table-title. These functions are included in an external JS file: If the name is 'bg-i ...

javascripthtmlcssimage

Is there a way to toggle the visibility of the angular material toolbar at regular intervals?

I'm currently experimenting with the CSS animation feature to display and conceal the angular material toolbar in this demonstration. Inside the application component, the hide attribute is toggled at intervals as shown below: hide:boolean = false ...

javascriptcssangulartypescript

How about a CSS one-by-one black pixel that's not opaque?

I've been attempting to achieve a 70% transparent black background on an element, but unfortunately, I had to use a pixel to address browser compatibility problems. Using CSS alone would make the entire content of the element transparent as well. Her ...

htmlcss

Prevent jQuery UI dialog from adjusting its position relative to the browser when scrolling

When I launch a jQuery UI dialog, the position of the dialog changes when I scroll the browser. How can I make it remain in the same position relative to the browser window? ...

jqueryhtmlcssjquery-uijquery-ui-dialog

Google Chrome applying its unique style compositions

I recently started transitioning a website from HTML to Wordpress, and encountered an unexpected challenge with Google Chrome applying unfamiliar styles. Specifically, the issue lies with the positioning of the background image bg.gif. While Internet Explo ...

cssgoogle-chrome

How can I center an image in HTML while maintaining a slight margin at the bottom

I am facing a minor issue with the bottom margin of an image. I can't figure out why there is a small gap between the image and the menu below. Can someone provide an explanation? My goal is to have the menu align perfectly with the image, but for so ...

htmlcssimagemargin

How can you switch the display between two different class names using JavaScript?

I currently have a total of four filter buttons on my website, and I only want two of them to be visible at any given time. To achieve this, I labeled the first set of buttons as .switch1 and the second set as .switch2. Now, I've added a 'switch ...

javascripthtmlcsstoggleweb-frontend

Struggling to align button text vertically in the center

I've searched through various sources, including stackoverflow.com and other websites, to solve this problem I'm encountering. Despite trying everything I found, I still can't get the text to center vertically in Firefox when styling buttons ...

htmlcss

The Angular Material Tree component is not rendering properly in an Angular tutorial demonstration

Upon completing the installation of @angular/material, @angular/cdk, and @angular/animations through npm install --save, I attempted to reconstruct the flat tree example provided by Angular. Unfortunately, even after addressing the error message stating Co ...

cssangulartreeangular-material

Basic progress bar

I'm attempting to create a basic download bar, but it's only displaying as a solid color without any transition animation. Furthermore, the "repeating-linear-gradient" feature isn't functioning and I'm struggling to figure out why. I&a ...

csshtml

Dreamweaver constantly combines an external CSS file with locally stored CSS when running on a local server

When I used Dreamweaver CS5, XAMPP Server, and PHP files in the past, I encountered an issue. The websites within my htdocs folder seemed to be pulling a specific website's CSS file. In 'Live View,' I could see all external .css and .js file ...

javascriptphpcssserverdreamweaver

The initial click event for the input element in Jquery is not functioning correctly

I found a jQuery date selector online and the script looked something like this... <script type="text/javascript> $(document).ready(function () { $("#date3").click(function() { $("#date3").scroller({ preset: 'datetime' }); wheels = []; whe ...

javascriptjqueryhtmlcss

Relocate the HTML checkbox to the left side of its width

I need an answer that utilizes only CSS, without any JavaScript. In a form, I have a checkbox as follows: <label for="autologin">Remember Me</label> <input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1"> <d ...

htmlcsscheckboxcss-floatforms

What is the best way to vertically align my image for perfect centering?

On one of my pages at , there is a section titled "FREE PICK UP AND RECYCLING OF LARGE QUANTITIES OF ELECTRONICS" with a picture of a truck. The image is perfectly centered vertically between the pictures on its left and right. Another page I have at fea ...

cssvertical-alignment

Problem with input field borders in Firefox when displayed within table cells

Demo When clicking on any cell in the table within the JSFiddle using Firefox, you may notice that the bottom and right borders are hidden. Is there a clever solution to overcome this issue? I have experimented with a few approaches but none of them work ...

javascripthtmlcss

React Card with Overflowing TableCell Texts

I am facing an issue with a table inside a table card where the TableCell is overflowing horizontally when the word is too long. How can I break it to the next line? Please refer to the "code" section for details. For more information, please visit my cod ...

cssreactjsmaterial-uijss

What purpose does '& .MuiTextField-root' serve within the { makeStyles } function of Material UI?

I've been working on a React JS project using Material-UI and came across some interesting styling in my Form.js file. Here's a snippet of the code: import useStyles from './styles'; const classes = useStyles(); <form autoCapitali ...

cssreactjsmaterial-ui

Guide to activating the 'Next' button on WP Forms using JavaScript code when certain conditions are fulfilled

Is there a way to adjust the JavaScript code provided so that the visibility of the "Next" button is dependent on whether at least one item in the 'wpforms-icon-choices-item' class has the '.wpform-selected' class on the current page or ...

javascripthtmlcsswordpresswpforms

What is the reason behind text underline being disabled when using "hidden: overflow" in CSS?

I have a long text string that I want to auto-shorten using CSS with text-overflow: ellipsis, but it's removing the underline from my link. Here is the code: NORMAL .link { font-weight: bold; cursor: pointer; color: black; text-decorat ...

css

fixed divs that remain in place while scrolling

In the past, I have implemented a method similar to this: However, I am not a fan of the "flicker" effect that occurs when the page is scrolled and the div needs to move along with it. Recently, I have come across websites where certain elements (such as ...

cssscrollcss-position