Step-by-step guide to vertically centering a single column in a two-column grid layout using Materialize CSS

I am trying to create a layout with two columns, where text is on the left side and a large image is on the right. I am utilizing col s12 l6 to ensure that these elements stack on top of each other on smaller screens.

In the design, I need the text on the left to be vertically aligned on larger screens but display normally on smaller screens. My framework of choice is Materialize.

<div class = "container">
    <div class = "row" style="border:solid">
        <div class = "col s12 l6" style="border:solid">
            <p>I want to have vertical alignment in the parent container on large screens, but function regularly on small screens.</p>
       </div>
    <div class = "col s12 l6" style="border:solid">
        <img src="https://comotion.uw.edu/wp-content/uploads/2017/06/image.jpg" ></img>
    </div>
</div>

Desired layout for big screens: https://i.sstatic.net/uGEYG.png Desired layout for small screens: https://i.sstatic.net/dxsro.png

Here is an example link for reference

htmlcssmaterialize

Answer №1

Effective Flexbox Solution

HTML

<div class = "container">
    <div class = "row Aligner" style="border:solid">
        <div class="row Aligner-item--top"></div>
        <div class = "col s12 l6  Aligner-item" style="border:solid">
            <p>Ensure vertical alignment within parent container on large screens while maintaining normal behavior on small screens.</p>
       </div>
       <div class="row Aligner-item--bottom"></div>
    <div class = "col s12 l6" style="border:solid">
        <img src="https://comotion.uw.edu/wp-content/uploads/2017/06/image.jpg" ></img>
    </div>
</div>

CSS

@media only screen and (min-width: 900px) {
.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Aligner-item--top {
  align-self: flex-start;
}

.Aligner-item--bottom {
  align-self: flex-end;
}
}

Codepen: https://codepen.io/chrisbradshaw/pen/XYOdXL

  1. Add a div with the class of "row Aligner-item--top" above and class "Aligner-item--bottom" below the target div.
  2. Add class "Aligner" to parent div.
  3. Set "Aligner" class to display:flex, align-items: center, and justify-content: center in CSS.
  4. Add "align-self: flex-start;" to top div and "align-self: flex-bottom;" to bottom div.
  5. Add media query so that this behavior is only implements on Viewports below 900px.

Original Solution (not optimal, "hard coding" margin-top):

CSS

@media only screen and (min-width: 900px) {
  .v-align {
    margin-top: 10vh;
  }
}

Updated codepen: https://codepen.io/chrisbradshaw/pen/bKzNMR

  1. Added class "v-align" to paragraph-containing div and applied margin-top of 10vh in CSS for vertical text centering. Consider using Flexbox for more precise alignment.

  2. Addressed feedback from Manoj Kumar by incorporating media query for .v-align margin-top to apply only on larger than 900px viewports. Experiment for perfect alignment.

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

Confirmation of successful submission of an HTML form

Here is a straightforward html form: <form id="form1" method="post" target="_self"> <input type="text" name="lastname"> <input type="submit" value="Register" /> <form> I am looking to replace the content of this page with a succes ...

asp.nethtmlformssubmitresponse

I struggle with managing a z-index in conjunction with an absolute position

Check out this codesandbox to see the issue where the 3 dots button is displayed over the menu. Click on the 3 dots to understand the problem. Below is the CSS code for the menu: .more-menu { position: absolute; top: 100%; z-index: 900; float: l ...

css

Leveraging Javascript functions within AngularJS' ng-view

I'm facing an issue with running a JavaScript function in ng-view to display a loading animation before the page loads. I'm in search of a solution and would appreciate your support in resolving this problem. Looking forward to your assistance. ...

javascripthtmlangularjsngroute

Integrating a fictitious style using jQuery

Having some trouble with this code snippet. The issue arises when trying to apply the following style using jQuery. CSS .arrow_box { position: absolute; width: 24px; border-radius: 30px 30px 3px 3px; height: 17px; float:left; } .arrow_box:after { bord ...

javascriptjquerycss

I need help setting up a link in HTML that redirects to the correct webpage when clicked. How can I make this happen smoothly?

<!DOCTYPE html> <html> <head> <title>______</title> <button class="btn about">About</button> <button class="btn socialmedia">Social Media</button></button> <button class ...

htmlcss

Imitate a keypress within a hidden web browser component using C#

Currently, I am engaged in a project that requires me to navigate a webpage and gather information about products, prices, etc. using the webbrowser object in .NET 3.5. The challenge arises because the page contains fields with an ajax suggest script, mak ...

c#.nethtmlajaxbrowser

"Changing background color, incorporating hover effects, utilizing !important, and manipulating .css properties with

Encountered a dilemma. I devised a "tabs" feature illustrated in the following demo: http://jsfiddle.net/4FLCe/ The original intention was for the tab to change color to A when hovered over, and to color B when clicked on. However, as shown in the demo, ...

javascriptjquerycss

Challenges Arising from the Featured Image Dimensions in WordPress

I'm currently experimenting with the featured image on this website powered by WordPress. The issue I'm facing is that the image is using a custom size instead of the size I intended. Additionally, it seems to be inheriting the characteristics of ...

phphtmlcsswordpressimage

Using JavaScript (without jQuery), take away the CSS class from an element

Seeking assistance from experts on the process of removing a class from an element solely using JavaScript. Kindly refrain from suggesting solutions involving jQuery as I am unable to utilize it, and have little knowledge about its functionalities. ...

javascripthtmlcss

Automatically numbering text boxes upon pressing the enter key

Is there a way to automatically number textboxes when I type "1" and hit enter in one of them? For example, if I have 3 textboxes and I type "1" in the first one, can the other textboxes be numbered as 2 and 3 accordingly? <input type="text&qu ...

javascripthtml

What is the best way to keep a checkbox unchecked after clicking cancel?

I'm working on a bootbox script that triggers a customized alert. I need the checkbox that triggers the alert to be unchecked when the user clicks cancel. Here is the checkbox when it's checked <div class="checkbox"> <label> ...

javascriptjqueryhtmlcheckbox

Organize the HTML table upon importing

In my code, I am populating a table with data retrieved from a JSON object. Here is the JavaScript snippet: if (jsonObj[0].array !== 'undefined' && jsonObj[0].array.length > 0) { for (var i = 0; i < jsonObj[0].array.length; i++ ...

jqueryhtmltablesorter

Does anyone know of a CSS/JavaScript framework that can be used to replicate the look and functionality of the iOS home

I'm wondering if there is a CSS/JavaScript framework that replicates the layout of an iOS home screen. I want to create a kiosk website with a grid layout similar to Android/iOS where apps can be displayed as icons. ...

javascripthtmlcssioshomescreen

What is the best approach to dynamically load html table cell data into a table with changing headers in a React application?

Currently, I am in the process of developing a <table> using React version 0.14.6. This table consists of column headers that are dynamically added to the <thead> section of the table: CourseTable.js: import CourseList from './CourseList ...

javascripthtmlreactjs

Automated alignment of masonry divs

Issue I am struggling to figure out how to make the divs automatically position themselves without leaving large blocks of empty space where another div could fit. I want the divs below the first and second divs to be directly underneath them. Below is th ...

htmltwitter-bootstrappositionjquery-masonrymasonry

File uploading feature in Bootstrap (without the need for Javascript)

While I've seen this question posted in a similar style before, one critical point (in my opinion) hasn't been addressed - is there a way to achieve this without using JavaScript? On mobile devices, overscripted sites can sometimes have non-worki ...

htmlcsstwitter-bootstrap

Header with a list and an accompanying image using HTML and CSS

Struggling to incorporate a header featuring a list and a small logo in the top right corner of the page, seamlessly integrated with the header lines. The first image link reflects my desired result while the second image shows where I'm encountering ...

htmlcss

Navigate to the initial visible element on the specified webpage via the page hash link

In my handlebars HTML template, I have a partial view that includes different pieces of content for desktop and mobile. I use different CSS classes to hide and show these elements accordingly. <div class='hideOnMobile showOnDesktop'> < ...

javascriptjqueryhtmlcss

Trouble with Angular Charts: Data Reading Issue

Trying out chart.js for the first time and encountered an issue where the chart is not able to read data from the model. Previously, I had an error message of Error: $injector:modulerr Module Failed to instantiate module chart.js. This was fixed by switch ...

javascripthtmlangularjschart.js

Issues with rendering images in the browser due to CSS inline-block layout are causing

I have encountered an issue with two divs that are set to 50% width and displayed inline-block. Each div contains an image. I expected both divs to stay on the same line, but sometimes the browser breaks the layout. Here is the HTML code snippet: <div ...

htmlcsslayoutbrowserresponsive-design