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

Traversing through JSON objects in Angular 2

I am currently facing an issue while trying to iterate through a JSON object. Below is the sample JSON data: floors.ts this.floors= [ { floorName: "floor 1", result: [ { resFloor: "1", ...

htmljsonangulartypescript

UL tags incompatible with columns

I am attempting to create 2 columns using an ordered list (ul). Despite successfully adding the ul and li's, I am encountering issues with the column formatting. You can view the JSFiddle here. Below is the code snippet: ul { background-color:yello ...

htmlcsshtml-lists

Animating a CSS overlay

My goal is to design an overlay using the following HTML and CSS code snippets div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 50%; right: 0; width: 20 ...

htmlcssanimationoverlay

Do you think there might be an issue with the CSS coding?

I have designed a user-friendly responsive login form that allows users to easily log in and reset their passwords. However, I am facing an issue where the username and password fields are not displaying on separate lines as intended. I have thoroughly ins ...

htmlcssforms

Enable users to choose multiple rows at once or alternatively choose by checking the checkboxes

When using Tabulator with the setting table.selectable = true, any cell click selects the row. However, I specifically want rows to be selected only via checkboxes, so I set selectable = false. The issue now is that the checkboxes behave like a radio butt ...

javascripthtmltabulator

Issue with integrating Bootstrap into Angular 2

When attempting to link to the bootstrap.css file located in the node_modules folder within index.html, I encountered an error. The application's folder structure is as follows: ecommerce-app/node_modules ecommerce-app/src/app/index.html All attem ...

htmltwitter-bootstrapangular

Guide to incorporating a fadeIn effect in Jquery triggered by a change event

Looking for some guidance on implementing a fade-in effect on a <p> tag with relevant CSS after making an AJAX call in response to a change event. Below is the current code snippet: $('#scenarioDropdownList').change(function() { var sc ...

javascriptjqueryhtmlcssajax

Creating a Slack-inspired interface with a Bootstrap 4 fixed bottom message box nested within a column

I'm attempting to create an interface similar to Slack, featuring a message box fixed at the bottom using Bootstrap 4. However, when I use the fixed-bottom class (where my custom message-box col is located), it spans the entire width of the window, wh ...

htmlbootstrap-4

the hidden input's value is null

I am encountering an issue with a hidden input in this form. When I submit the form to my API, the value of the input is empty. Isbn and packId are both properties of a book model. However, for some reason, the value of packId is coming out as empty. & ...

javascripthtmlnode.jsangular

Prevent the box from closing automatically after submitting a form using jQuery

Despite my efforts to keep a simple dialog box open after submitting a form, it continues to close. I tried using the preventDefault method in jQuery, but it didn't solve the issue. Below is the code snippet: $(document).ready(function(e) { $(&apo ...

javascriptjqueryhtmlcss

Need help positioning this HTML iframe on my webpage?

Can anyone help me figure out how to position this HTML i-frame in a specific place on my webpage? <div style="overflow: hidden; width: 333px; height: 156px; position src="h: relative;" id="i_div"><iframe name="i_frame"http://url.com/click.php?a ...

htmlcss

Utilizing Google Maps to generate outcomes for an online platform

My approach with Google Maps is a bit unconventional. Instead of rendering images, I aim to execute JavaScript code that processes data and returns a text response. However, I soon realized that running JavaScript as a remote web service might not be pos ...

phpjavascripthtmlweb-servicesgoogle-maps-api-3

What is the best method for converting a variable with HTML content into a printable string?

In an attempt to display user-entered data from a text box to an HTML div, there seems to be an issue when the data contains HTML content. Instead of displaying the content as a string, it shows it as HTML elements. For example: let text = "<h1>Worl ...

javascripthtmlstring

CSS - my expectations of reduced content were not met

I'm attempting to create a responsive content box that shrinks properly when the browser size is reduced. However, I am facing an issue where the content (yellow) does not shrink and instead overflows horizontally when the browser is minimized too mu ...

cssflexbox

Text element in SVG not displaying title tooltip

Looking for a solution to display a tooltip when hovering over an SVG Text element? Many sources suggest adding a Title element as the first child of the SVG element. This approach seems to work in Chrome, but not in Safari - the primary browser used by mo ...

javascriptjqueryhtmlsvgtooltip

Attempting to display a larger version of an image sourced from miniature versions fetched with the assistance of PHP and

I'm dealing with the challenge of displaying thumbnails fetched from a database. PHP is successfully interacting with and presenting my thumbnails. I'm currently faced with the issue of passing the id from the database to the imageID in my JavaSc ...

javascriptphphtmlcss

It's a mystery unraveling the source of CSS margins and padding

Could someone please help me analyze this webpage? I am trying to make the center of the page white up to the navigation bar, at the bottom of the page, and horizontally up to the shadows on both sides. I'm not sure where this extra padding is coming ...

htmlcsstwitter-bootstrapsass

In which location are HTML files stored within WordPress plugins?

Can someone help me locate the HTML files within WordPress plugins? I'm looking to make edits to the HTML and CSS files of a plugin, but I can't seem to find the specific HTML file. Any guidance on where these files are stored would be greatly ap ...

htmlcsswordpressplugins

Modifying Copyright Feature in Footer

I am attempting to implement this function within my dark-colored footer: import Typography from '@material-ui/core/Typography'; function Copyright() { return ( <Typography variant="body2" color="textSecondary" align="center"> ...

javascripthtmlcssreactjsmaterial-ui

Begin the ul element from the left-hand side

Check out my latest JSFiddle creation: http://jsfiddle.net/alonshmiel/Ht6Ym/2409/ I'm attempting to align the ul element on the left side of the page: I've experimented with the following CSS rules: margin-left:0px; float: left; Unfortunatel ...

htmlcss