Vertically centering issue persists in Firefox browser

In my code, I have created a 'img-cell' div that is empty but has a set height and background image. Beneath it, there is a 'text-cell' div with 100% width. (I have removed the PHP code from this example as it does not impact the layout)

The HTML structure looks like this:

<article>
 <div class="img-cell">
 </div>

  <div class="text-cell">
   <div class="extra-css" >
      <h1>Title</h1>
      <h3>Category</h3>
   </div>
 </div>  
</article>

For the CSS styling:

 article {
   position: relative;
   margin: 0; 
   padding: 0;
 }

.img-cell { 
  position: relative;
  height: 375px;
  width: auto;
  padding: 0;
  margin: 0;
  border-top: 1px solid #000;
  background-size: cover;
  background-repeat: no-repeat; 
}

 .text-cell {
   position: absolute;
   z-index: 10;
   padding: 15px 0;
   width: 100%;
   margin: auto;
   top: 0;
   bottom: 0;
   display:table;
 }

Currently, the 'text-cell' div is vertically centered over the 'image-cell' div only in Safari browser, not in Firefox or other browsers due to the use of display:table. I am looking for an alternative solution to achieve the vertical centering without using tables.

EDIT - On mobile screens, I change the positioning of 'text-cell' to relative so it appears below the 'img-cell' div.

javascriptjqueryhtmlcssabsolute

Answer №1

Here's a different way you can approach solving your issue using the same HTML structure but with some adjustments in the CSS:

 
article {
   position: relative;
 }

.img-cell {
  height: 375px; 
}

 .text-cell {
   position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   left: 0;
   right: 0;
 }

Check it out on this Fiddle: http://jsbin.com/tumofitera/1/edit?html,css,output

Answer №2

Here is a suggestion you can try out:

If you want to center the vertical alignment of the .text-cell, follow these steps:

To vertically center the content within <h1> and <h3>, simply remove the padding.

HTML

<article>
 <div class="img-cell">
  <div class="text-cell">
   <div class="extra-css" >
      <h1>Title</h1>
      <h3>Category</h3>
   </div>
  </div> 
 </div>
</article>

CSS

 article {
   position: relative;
   margin: 0; 
   padding: 0;
 }

.img-cell { 
  position: relative;
  height: 375px;
  width: auto;
  padding: 0;
  margin: 0;
  border-top: 1px solid #000;
  background-size: cover;
  background-repeat: no-repeat; 
}

 .text-cell {
   position: absolute;
   z-index: 10;
   padding: 15px 0;
   width: 100%;
   margin: auto;
   top: 0;
   bottom: 0;
   display:table;
    top: 50%; //add this
    display: inline-block; //add this
    transform: translateY(-50%); //add this
    background: #f1f1f1;
    display: inline-block; //add this
    vertical-align: middle; //add this

 }

Check out the DEMO HERE

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

Steps for moving data from a JavaScript variable to a Python file within a Django project

I have created a unique recipe generator website that displays each ingredient as an image within a div. When the div is clicked, it changes color. My goal is to compile the ids of all selected divs into one array when the submit button is clicked. I have ...

javascriptpythonhtmljquerydjango

Adding an object array to a new array - Step by step guide

I am working with an array of states const states = [{id:1,name:"New York",cities:[...]},{id:2,name:"California",cities:[...]}] My goal is to extract all cities and store them in a new array using methods ... const cities = [] this.s ...

javascriptvue.jsvuejs2

mentioning a JSON key that includes a period

How can I reference a specific field from the JSON data in Angular? { "elements": [ { "LCSSEASON.IDA2A2": "351453", "LCSSEASON.BRANCHIDITERATIONINFO": "335697" }, { "LCSSEASON.IDA2A2": "353995", "LCSSEASON.BRANCHIDITER ...

javascripthtmlangularjsjsontypescript

Tips for incorporating JSON data into an HTML table

https://i.sstatic.net/WEdge.jpgIn an attempt to showcase JSON data in an HTML table, I want the schoolClassName value to be displayed as a header (th) and the first names of students belonging to that specific schoolClass to appear in a column beneath the ...

javascripthtmlarraysjsonreactjs

Flow object with Angular using ng-flow: Existing flow object

Just a quick question that I can't seem to find an answer for on my own or through searching online. Currently, I have a button set up for clicking and uploading files. However, I also want to incorporate drag and drop functionality using the same fra ...

javascriptangularjsng-flow

React-redux: There is a TypeError in the code, as _this2.props.handleCityChange is not recognized as

I am currently working on integrating a weather widget in react-redux. I keep encountering the error message "TypeError: _this2.props.handleCityChange is not a function" and similar errors for other functions as well. Despite referring to the redux documen ...

javascriptreactjsreduxreact-redux

What are the methods for setting the width and height of an Angular mat dialog box?

I'm currently working with a Mat dialog box in Angular and I'm trying to include styles for width and height within that object. However, I'm encountering errors and can't seem to resolve them. Is there another method for setting width ...

cssangularmodal-dialogmat-dialog

Attempting to transfer a user's username to their email address through PHP

I am working on a project that involves retrieving usernames based on user emails from a database. I have set up a form where users can enter their email to receive their username, and below is the code I am currently using: <html> <body> &l ...

phphtmlmysql

How can you use ajax to update the content of a single div in Yii?

I encountered a little issue when attempting to refresh the content of my div using Ajax, as it ends up replacing the entire page within that div. This is causing some trouble for me. Here is a snapshot of the problem: Problem Screenshot You can view my ...

jqueryajaxyii

Modifying the color scheme of Bootstrap

In order to simplify referencing, I am establishing new theme colors as shown below, allowing me to use classes like bg-red instead of bg-danger or text-purple, and so forth. $primary : #24305e; $blue : #375abb; $indigo : #796eff; ...

csstwitter-bootstrapsass

Four identical columns with no outer margin and evenly spaced inner margins

This is a variation of the discussion on removing right and left border space in table-cell display elements. Despite attempting to use divs with equal inner margins, I encountered unexpected spacing causing the last div to wrap. You can view my attempt ...

htmlcss

What is causing the CSS transition to fail in the updated DOM?

When attempting to apply a CSS transition as shown in the following code snippet: https://jsfiddle.net/sunyuu/e58sfeva/17/ var Main = { data () { return { isActive: false, childStyle: {} }; }, methods: { sho ...

javascripthtmlcssvue.js

Incorporating Ajax comments into an Ajax-powered status feature

I'm currently in the final phase of implementing ajax in my feed. Originally, I thought it would be a simple matter of pasting the comment input, but it turned out to be more complex than I anticipated. I placed the input below the main ajaxed status ...

phpjqueryhtmlajax

JavaScript and inverted brackets

Why does Javascript allow the use of inverted parentheses in function calls? I'm currently using a Node console on the CLI with Node version 0.10.25. function a(){ return 42 } a() // -> 42 a)( // -> 42. Strange behavior? function b(t){ return ...

javascriptnode.js

What are some ways to boost the height of an element in an upward direction?

Here is the HTML Code: <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> </ul> Adding one more li in the list causes it to gr ...

htmlcss

Showcasing ranges from various input types on a single page

I have a challenge in displaying the values of multiple sliders on my webpage. Here's the code snippet I've been working on: var i = 0; var st = 'slider'; var ot = 'output'; var s = ''; var o = ''; for ...

javascriptjqueryhtml

jQuery UI DatePicker: without any styling, no picking dates

I'm struggling to configure a jQuery UI DatePicker. I moved the development-bundle folder contents to the directory res/jqueryui and initialized two datepickers as shown below: <script src="res/jquery-2.1.0.min.js"></script> <script sr ...

jquerycssjquery-uidatepickerjquery-ui-datepicker

displaying the items in a JavaScript array

Does anyone know how I can replace the date in the "events" section with a list of dates fetched from a JSON call stored in "bookedDates"? I also need to ensure that each date is enclosed in curly braces: {}. <script type="text/javascript> var toda ...

javascriptjqueryarrays

Use multer-ftp to change the name of a file

I've been working on uploading a file to an FTP server using multer-ftp. The file is successfully uploaded, but I need to change the name of the file. Is there a way to accomplish this? var upload = multer({ storage: new FTPStorage({ basepath: ...

javascriptnode.jsftpmulter

What is the best way to include an array in an object while only retaining a single column for each element in the array?

I am working with an array named answers on my webpage, which has the following structure: answers[{x: 1, r: true;},{x: 2,r: false;},{x: 3, r: true;}] I believe I have defined this correctly. The answers array consists of a variable number of rows (in th ...

javascriptangularjs