How to vertically align content using Zurb Foundation's equalizer feature?

I am currently utilizing Zurb Foundation 5 along with the equalizer component. In a scenario where I have three columns of equal width, I am aiming to achieve vertical center alignment for the content (text) in the middle column and vertical bottom alignment for the content (image) in the right column.

Is there an effective method to accomplish this while also retaining the responsive characteristics?

<div class="row" data-equalizer>
<div class="large-5 small-12 columns" data-equalizer-watch>
    <img class="show-for-medium-up" src="~/Content/Images/BallCropped-800.jpg" />

</div>
<div class="large-4 small-12 columns" data-equalizer-watch>        
    <p class="subhead">Middle Text</p>
    <ul>
        <li>
           One
        </li>
        <li>Two</li>
        <li>Three</li>           
    </ul>
</div>
<div class="large-3 small-12 columns " data-equalizer-watch>
          <img src="~/Content/Images/Bottomlogo-400.gif" />
</div>

csszurb-foundation

Answer №1

Check out the snippet below for a possible solution: 

.wrapper {
  height: 200px;
  padding: 20px;
  border: solid 1px #000;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.columns {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.large-5 {
  align-self: flex-end;
}

.large-4 {
  align-self: center;
}
<div class="wrapper">
  <div class="row" data-equalizer>
    <div class="large-5 small-12 columns" data-equalizer-watch>
      <img class="show-for-medium-up" src="~/Content/Images/BallCropped-800.jpg" />

    </div>
    <div class="large-4 small-12 columns" data-equalizer-watch>
      <p class="subhead">Middle Text</p>
      <ul>
        <li>
          One
        </li>
        <li>Two</li>
        <li>Three</li>
      </ul>
    </div>
    <div class="large-3 small-12 columns " data-equalizer-watch>
      <img src="~/Content/Images/Bottomlogo-400.gif" />
    </div>
  </div>

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

`<a> The value does not appear upon page load`

As a newcomer to development, I am currently experimenting and creating a sample dashboard. However, I am facing an issue where the sidebar value does not display upon loading the page. I have to manually click on a list in my sidebar for it to appear. Th ...

htmlcssbootstrap-4

The styling of the Material UI autocomplete listbox does not affect its appearance

I am working on an autocomplete feature that groups items by titles. I am trying to adjust the height of the first group to be different from the rest, but I am facing some challenges since there is no unique identifier for the ul component. To work around ...

cssreactjsmaterial-ui

Tips for utilizing numerous tables with multiple selection tags

I am struggling with a jQuery issue involving multiple container elements with the class "product-sizes". Each container contains a select option for choosing between inches and centimeters, which triggers the corresponding table display. The problem arise ...

javascripthtmljquerycssforeach

Exploring the utilization of CSS host selectors with Angular4 to target direct child elements

Within my app.component.css file, I currently have the following code snippet: * ~ * { margin-top: 24px; } This rule actually adds some top margin to all elements that come after the first one. However, this is not exactly what I intend to achieve. My ...

cssangularcss-selectors

Creating Hover Effects for Touch Screen Devices with jQuery

Recently, I came across a piece of code that enables a link to become active on the second tap when using touch screen devices. I found this code snippet from: hnldesign.nl (function($) { var landingLink = '.nav-landing > li'; if ((' ...

jquerycss

CSS struggles after implementing conditional checks in return statement for an unordered list

I'm encountering a CSS issue with the header section. When I include the following code snippet in my code to display a tab based on a condition, the entire header list doesn't appear in a single horizontal line: <div> {isAdmin(user) ? ...

javascriptcssreactjs

Conceal certain tables within a container

On my SharePoint page, I have the following HTML structure: <div id="ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView"> <table cellspacing="0" cellpadding="0" style="border-width:0;"> <table cellspacing="0" cellpadding="0" style="border-width: ...

htmlcss

Is there a way to replace the default Laravel pagination CSS class with a custom theme CSS class?

Is there a way to update my Laravel pagination CSS to match my theme's CSS? I need help with this adjustment. Here is the HTML for the theme's CSS: <div class="row mt-5"> <div class="col text-center"> ...

htmlcsslaravellaravel-blade

hide the scroll button when at the top of the page and hide it when at the bottom

Looking to create a vertical scroll that hides the up button when at the top and hides the down button when at the bottom? Jquery can help with this, but sometimes it's tricky to get it just right. Take a look at an example here. Below is the code sn ...

jqueryhtmlcssscroll

Transitioning from LESS to SASS involves adapting responsive breakpoints

Adapting from Less to Sass has been my current focus. I have defined responsive breakpoints in Less variables: /* Breakpoints */ @break1:~"(max-width: 570px)"; @break2:~"(min-width: 571px) and (max-width: 1002px)"; @break3:~"(min-width: 1003px)"; These ...

cssresponsive-designsasslessmixins

What are some alternative ways to arrange this main navigation bar?

Check out the website, below the map you'll find an unordered list: HTML code: <ul class="play_navigation"> <li class="active"><a href="#" class="barino_story_bottom">The Story</a></li> <li><a href="#" ...

jqueryhtmlcssxhtml

What could be causing my page to appear off-center?

Hey there! I'm still learning the ropes, but I could really use a hand with this issue: So, while I was playing around with HTML and CSS, I wanted to create a page with a fixed size that would be perfectly centered on the screen. My approach was to p ...

htmlcss

What can I do to ensure that the cells within a CSS grid row have consistent heights across various columns?

Seeking for a solution to this issue seems futile - every response I find is about a slightly different issue, where all the rows in a single column end up being the same height as the tallest cell in that column. The suggestion is to add grid-auto-rows: 1 ...

htmlcssgrid

Does text disappear when hovered over in CSS?

Having some trouble getting a text to display on hover over the parent container while adjusting the opacity. Despite trying multiple methods, it just won't show up no matter what I do! Here is my current code: .project{ position: relative; ...

htmlcsshover

Is there a way to place the icon on the right side of the @mui/Chip component?

Currently, I am working with MUI version 5.15.0. I have a component called Chip, and my goal is to display the icon after the label on the right side. I attempted to use the CSS rule - .MuiChip-icon{ order:1 }, but it resulted in too much spacing. Additio ...

cssreactjsmaterial-uisx

If the height of the window changes, then update the CSS height accordingly

Here is the code that I am using: $(document).ready(function() { $('body').css('overflow', 'scroll'); var heightWithScrollBars = $(window).height(); $('body').css('overflow', 'auto') ...

jquerycss

Adjusting image size to accommodate responsive column cell using CSS

I've been working on optimizing my mobile website using a responsive column layout. The challenge I'm facing is getting the images within each column to stretch to 100% width while automatically adjusting their height. I experimented with settin ...

htmlcss

Ways to ensure that the height of the second row in the second column matches that of the first column

My current layout design is causing an issue where the lower green box extends beyond the total height of the entire box. I've provided a rough version of my code on codepen. Using the Bulma framework, my goal is to align the height of the left column ...

javascripthtmlcssbulma

Alignment of inputs remains stubbornly off-center despite floating left

My main goal is to have all my inputs aligned to the left for a clean and organized look, similar to the image provided below: Despite my efforts to float the inputs and paragraphs to the left, I am facing an issue where they do not align properly. Instea ...

htmlcss

A difference in the way content is displayed on Firefox compared to Chrome, Edge, and Safari

Recently, I encountered an issue with a tool I had developed for generating printable images for Cross-Stitch work. The tool was originally designed to work on Firefox but is now only functioning properly on that browser. The problem at hand is whether th ...

javascripthtmlcssfirefox