Having trouble keeping the HTML text centered within the div on a responsive layout

Having an issue with keeping text centered in the middle of a div that overlaps an image. It looks fine on desktop but when I try to make it mobile-friendly, things go haywire. I believe the problem lies in using fixed heights for the div, as setting height:auto; just aligns the text to the top since the actual height is unknown. Does anyone have a better approach to solve this?

To provide context, here's the website where the issue can be seen: The problematic area is the three large images displayed in the center of the page.

Currently, this is the CSS code I am utilizing:

span.text-content, div.homepage-bags span.text-content-bags { color: #fff; display: table; font-size: 30px; left: 0px; position: absolute; top: 0px; text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.5), 0px 1px 3px rgba(255, 255, 255, 0.5); text-transform: uppercase; width: 100%; }

div.homepage-featured span.text-content { height: 620px!important; }

div.homepage-buckets span.text-content { height: 288px!important; }

div.homepage-bags span.text-content-bags { height: 288px!important; }

div.homepage-featured span.text-content span, div.homepage-bags span.text-content-bags span { display: table-cell; text-align: center; vertical-align: middle; }
htmlcsstextalignment

Answer №1

Avoid using height !important for every span.text-content. It should function properly with just height: 100%; in this case. Additionally, eliminate display: table; from span.text-content, as we will center the inner span absolutely. For the inner span:

span.text-content span {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin-top: -12px;
    text-align: center;
}

The text in the hover layer is brief, so it is unlikely to wrap. Therefore, using top:50% with margin-top set to half of the text height is suitable for vertical centering.

It would also be advisable to specify display: inline-block for the a tag here, as there seems to be an issue with overlay width on the initial image on mobile devices.

Answer №2

After numerous attempts, I have finally found a potential solution for you. Implement this CSS code on your span.text-content:

display: block;
height: 0 !important;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
line-height: 0;
text-align: center;

Remove the text from its span container so that only the raw text remains within your span.text-content.

Essentially, by using margin: auto, the browser resolves any conflicting height properties (both specified as 100% through top: 0; and bottom: 0; along with the specified height: 0;) and centers it within the container based on the provided positions.

Note: The !important declaration is used here to override any hardcoded heights previously set in the code.

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

Firefoxy can't seem to get through the navigation keys within an element that has a hidden

Check out this fiddle I created: http://jsfiddle.net/c11khcak/13/. My goal is to hide the scrollbar of an element while still allowing it to be scrollable using the mouse wheel and up/down navigation keys. I've been able to achieve this using some bas ...

htmlcssfirefoxscroll

Maximizing the Potential of Bootstrap 5's Grid System

I'm struggling a bit with the Bootstrap grid system. I want to create 6 divs or containers that span the full width on smaller devices like mobiles, use 25% of the width on medium devices like tablets, and display all 6 in a single row on large deskto ...

csstwitter-bootstrap

How should I refer to this style of font?

After trying to implement a font from bulletproof @font-face as a template for my website, I am facing issues. My goal is to utilize the perspective-sans black regular font. Despite uploading the necessary files - including the css style sheet provided in ...

cssfontsfont-face

Sending data from Angular to the DOM

Is there a way to dynamically pass a property to an HTML tag using Angular? <div class="my-class" data-start="10"> I am trying to figure out how to pass the value of data-start dynamically. This is for an Angular 5 application. Any advice would be ...

htmlangularangular-directive

select2 with customizable multi-column layout

Looking to create a multi-column select2 with a dynamic number of columns by specifying the number of columns as a data attribute in the select tag, or utilizing another method. <select data-cols="2,6,4"> <!--note data-cols--> < ...

htmljquerymultiple-columnsjquery-select2

Filtering data in an antd table by searching

Just starting out with React hooks, specifically using TypeScript, and I'm struggling to implement a search filter with two parameters. Currently, the search filter is only working with one parameter which is 'receiver?.name?'. However, I wo ...

javascripthtmlreactjstypescripthtml-table

Should you stick with pre-defined styles or switch to dynamic inline style changes?

I am currently developing a custom element that displays playing cards using SVG images as the background. I want to make sure that the background image changes whenever the attributes related to the card's suit or rank are updated. From what I under ...

javascripthtmlcssweb-componentcustom-element

Fluid pictures in Mozilla Firefox not fluid

My images are shrinking in Chrome, as expected, but they don't adjust their size in Firefox and IE9. I'm using the CSS below: .pics img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ border: 1px solid #CCC; }​ ...

cssresponsive-design

Transforming HTML Code in a PHP Document to a PDF Document

I have a PHP file that interacts with a database to update the HTML content. There is a button on the page labeled "Export As PDF". I attempted to convert the page to a PDF using HTML2FPDF, but encountered this error message: FPDF error: Unable to create ...

phphtmlpdfhtml2pdf

Angular: Display an element above and in relation to a button

Before I dive in, let me just mention that I have searched extensively for a solution to my problem without much luck. The issue is describing exactly what I'm trying to accomplish in a way that yields relevant search results. If you're interest ...

cssangularhtmltypescript

Having trouble with sending information to the PHP server, unable to determine the root cause

Can someone help me figure out why the data from a form being sent to a php script for sending an email isn't working correctly? It's part of a template code but I suspect there might be an error. Specifically, I believe the {'userName' ...

phpjavascripthtmlemail

Using Javascript to dynamically add variables to a form submission process

Looking to enhance my javascript skills, I've created a script that locates an existing id and exchanges it with a form. Inside this form, I'm aiming to incorporate javascript variables into the submit url. Unsure if this is feasible or if I&apo ...

javascriptjqueryhtmlforms

Tips for using CSS to position a sidebar on the right side of the screen:

I've been working on creating a simple sidebar and have reached this point in my code. However, I'm struggling to get it to float to the right. It's all a bit confusing for me. If you'd like to take a look at the code, here is a link t ...

htmlcss

How CSS can affect the layout of elements on a webpage

I am looking to achieve something similar to this: The left box should maintain a fixed width, while the right one resizes to fit the full width of the browser window. I also need the height of both boxes to be resizable. Apologies for any inconvenience ...

htmlcss

Having difficulty configuring Compass in WebStorm

Trying to integrate Compass into an existing WebStorm project has been challenging for me as the CSS files are not linking properly. Despite my efforts to modify the relative links, I have not yet managed to resolve the issue. The folders and config.rb we ...

csswebstormcompass-sasscompass

The color of the top bar remains unchanged when hovered over

I am struggling to design my personal website, and I can't seem to get the top bar to change color on hover. If you believe you have a solution, please provide your answer. index.html appears to be functioning properly, but perhaps additional adjustm ...

htmlcss

Changing the CSS class of the Bootstrap datetime picker when selecting the year

Is there a way to change the CSS style of the Bootstrap datetime picker control so that when selecting years, the color changes from blue to red? I attempted to do this with the following code: .selectYear { background-color:red!important; } However ...

javascripthtmlcsstwitter-bootstrap

Guide to align elements (cards) side by side in a row within a container element (div)

I have a question that bears resemblance to another one found on this site. I decided to create my own version of the Material UI Card example from https://material-ui.com/demos/cards/. You can view and edit my version on the sandbox editor by clicking he ...

cssreactjsmaterial-ui

Tips for positioning an image in the TOP Right corner below the navbar using CSS

I am currently in the process of learning HTML and CSS, and I would like to practice and conduct research whenever I encounter difficulties. Recently, I have been attempting to style my landing page based on a screenshot that I took. However, I have been u ...

htmlcss

I encountered a data discrepancy while attempting to link up with a weather API

This is my debut app venture utilizing node.js and express for the first time. The concept behind this basic application involves connecting to an external API to retrieve temperature data, while also allowing users to input their zip code and feelings whi ...

javascripthtmlnode.jsapiexpress