Place the item at the center

My question may be simple, but I'm struggling to find the solution.

I have a slider with an image in the middle and want to display some text alongside it like this: https://i.sstatic.net/v2Rck.jpg

However, I can't seem to get the text to align vertically with the image. Here is the CSS code I'm using:

.caption {
    position: absolute;
    height: auto;
    text-align: center;
    zoom: 1;
    color: white;
    display:table;
    left:20%;
    width: 60%;
    margin-top: auto;
    margin-bottom: auto;
    padding: 10px 0;
    background:rgba(138, 138, 138, 0.55);    
}

Could someone please point out what I might be doing wrong?

htmlcssslider

Answer №1

To ensure your div is vertically centered, utilize the position tag along with the top and transform properties as shown below:

.caption {
    position: absolute;
    height: auto;
    text-align: center;
    zoom: 1;
    color: white;
    display:table;
    left:20%;
    top:50%;
    transform:translate(0,-50%);
    width: 60%;
    margin-top: auto;
    margin-bottom: auto;
    padding: 10px 0;
    background:rgba(138, 138, 138, 0.55);    
}

By using both properties, you can ensure that the div is always centered vertically regardless of its height.

For a practical example, refer to this demo: https://jsfiddle.net/y2z94ez3/

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

Retain the dashes in their original positions while extracting numbers following each dash from an array using Regex

Someone from a different discussion helped me figure out how to extract the numbers from an array. However, I am now struggling to capture the numbers after the "-" dash. Let me illustrate what I have and put you in the same scenario. Here is the array co ...

phphtmlarraysregexnumbers

What methods can be used to restrict users from navigating to the previous or next page while they are scrolling horizontally within a scrollable div?

Experiencing a frustrating UX issue that arises from using a wide table within a scrollable div on a webpage. The problem occurs when users scroll horizontally using a trackpad on a mac, they sometimes unintentionally trigger the "go to next/last page" fe ...

htmlcssbrowseruser-experience

Modifying the onclick function of an HTML select element - easy steps!

I have customized the click event on my select tag to trigger a specific action. However, when I click on the select tag, the default option list is also displayed. I want to bypass this default behavior and only execute my custom action when the select ta ...

javascriptjqueryhtmlhtml-select

Tips for maintaining the default page size on your website when adjusting the browser window size

I've been struggling with a problem for quite some time now. How can I maintain the default page size of my website while resizing the browser? Let's assume the page size is 1280x720, how do I ensure that size remains intact when I adjust t ...

htmlcss

The file-loader in Webpack is failing to copy the files and update the URL

I am encountering an issue with webpack file loader where it is not outputting image files. This problem arises while also importing HTML files as partials in my Angular app. Below is my webpack configuration for handling images using the file-loader: [w ...

javascripthtmlangularjswebpackangular-material

Display all elements on a webpage using Javascript without the need for scrolling

I'm looking for a way to ensure all items on a webpage load immediately, without having to scroll down multiple times before running a script to find a specific item. Is there a method to have all items load at once without the need to manually scroll ...

javascripthtmlcss

What is the best way to align the images on the right side of this Bootstrap Footer design?

Is there a way to reduce the gap between the "linkedin" images in my Bootstrap footer template? I've tried replacing the default images on the right side with linkedin icons, but I can't seem to adjust the padding/margin properly. Here's the ...

htmlcssbootstrap-5

Organizing knockout data outcomes into two separate columns

Is there a way to split up this code into two columns using Knockout and HTML? I can do it easily in CSS, but the goal is to divide the results into segments 1-5 and 6-9. Here is the code snippet. Also attached is a screenshot for reference. Thank youhtt ...

htmlcssknockout.js

What is the best way to center a grid item in Material-UI within a React application?

I'm struggling with centering a grid element in MUI v5 and aligning a long paragraph to the left side while adding horizontal margin for big screens. Can anyone help me out with this? Thank you. <Box style={{ backgroundColor:" ...

cssreactjsmaterial-ui

I prefer not to receive the parent's opacity settings when styling a child element in CSS

Is there a way to prevent the child element from inheriting the opacity of the parent in CSS? I have a parent div and a child div inside it. I want to set the opacity for the parent div, but not have it affect the child div. Does anyone know how I can ac ...

css

How to align a div with embedded tweets in the center

I am looking to include a series of tweets from Twitter in a div on a basic webpage. The challenge is centering this div horizontally on the page. I have tried using: <div style="text-align:center"> and also: <div style="width: 900px; display ...

htmlcsscentermargin

Styling a div element in CSS with absolute positioning and the ability to

I am looking to set specific positions and dimensions for the div elements within my HTML document. Refer to this image for reference: https://i.stack.imgur.com/ANBVm.png For each of these div elements, I want a vertical scrollbar to appear if the content ...

htmlcssscrollpositionabsolute

Tips for validating multiple inputs of the same type with identical names in JavaScript

I have limited experience with Javascript and am facing an issue with a HTML form that contains multiple input types with the same names occurring more than once. My goal is to validate the form before inserting the data into the database. I have managed t ...

phpjavascripthtmlformsvalidation

What is the best way to stylize a date using Bootstrap-datepicker?

While this topic is well-known, I have a slightly more complex question regarding it. I have gone through the documentation here. My goal is to display the date in French format (dd/mm/yyyy) and save the value in US format (yyyy-mm-dd). Additionally, I nee ...

javascripthtmlcssbootstrap-datepicker

Learn a simple method of integrating carousels into text elements within a grid using exclusively Bootstrap 5

I need to incorporate a carousel into this section of my code using only Bootstrap 5. However, the current implementation is not functioning as expected (the items are stationary): This is the relevant HTML snippet: <div class="container px-4" ...

htmlcssfrontendcarouselbootstrap-5

Incorrect color change on button triggered by onMouse actions and state fluctuations

While creating a user profile on my app, I encountered an issue with button coloring. When I try to add color functionality to the button, it turns red instead of green and remains red even when the mouse is not hovering over it. My goal is to have the but ...

javascriptcssreactjsdom-events

Customizing the styling of an anchor tag using CSS in Bootstrap

I want my active link to appear red: nav class="navbar navbar-inverse"> <div class="container col-1 col-sm-12"> <ul class="nav"> <li class="<%= 'active' if current_page?(squad_path) %> ...

htmlcssruby-on-rails

JavaScript code using the Jquery library to retrieve the following article from 'cached memory'

I am aware of the easier CSS options for my question, but I am determined to learn JS (Jquery), so please bear with me. My plan: Menu-items are connected to articles within my content division. Initially, only the first article (#intro) is displayed. All ...

javascriptjquerycsshtml

What is the approach to initiating a jquery function once HTML content is dynamically added through an AJAX call?

<div id="timeline"> <ul class="grow" id="grown"><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight< ...

phpjavascriptjqueryhtmlajax

The switchView feature is currently malfunctioning and unable to access the content on the next page

For my application's admin panel design, I've divided my home into containers. The aim is to display details of clicked items in Images.html and Categories.html when a menu item in the 2nd container (also known as side bar) is clicked. However, m ...

javascripthtmlnode.jsbootstrap-4