Aligning text in the middle of an image both vertically and horizontally

I've been experimenting with different methods to vertically align caption text in the middle of an image, but I haven't had much luck. I've tried using table-cells and other techniques, without success!

Currently, I have an <li> element with a nested <a>, <img>, and div.caption-wrapper. While I've set the caption wrapper to the same size as the image, I'm still struggling to position it correctly over the image.

It's clear that I need to work on the basics, but if anyone has any suggestions or solutions, I would greatly appreciate it! Here is a link to my fiddle to see where I'm at.

htmlcss

Answer №1

Just created a JSFiddle demo.

For enhancing the design, apply the following styling to .caption-wrapper:

top: 50%;
transform: translateY(-50%);
-webkit-transorm: translateY(-50%); /* specifically for Chrome */
position: absolute;
left: 0;
display: inline-block;

Ensure to eliminate the height: 100% and width: 100% declarations from .caption-wrapper.

Answer №2

Here is a solution utilizing position: absolute in combination with Flexbox

ul {
  list-style-type: none;
  padding: 0;
}

a {
  position: relative;
  display: inline-block;
}

.caption-wrapper {
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-size: 35px;
  text-align: center;
}
<ul id="og-grid" class="og-grid">
  <li class="grid-item">
    <a href="#">
      <img src="http://oldo-nicho.com/img/services/2.jpg" alt="img01"/>
      <div class="caption-wrapper">
        <span class="grid-caption">Caption text! Caption! Caption!</span>
      </div>
    </a>
  </li>
</ul>

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

Add a background image to the parent element while preserving the existing background color

Can you help me figure out how to apply a background image to the menu while still keeping the background color? HTML: <div class="top"> <div class="menu"> Nop. </div> Nam hendrerit erat eget tellus mollis facilisis. ...

htmlcss

Angular JS application failing to load in browser due to a simple issue

I recently completed working on two pages index.html and app.js, which were created while following a helpful tutorial found here. The structure and content of each page are outlined below: index.html <!DOCTYPE html> <html ng-app ="store"> ...

angularjshtml

Applying a gradient overlay to an image using CSS

Feeling a bit frustrated with this issue. I'm working on my Joomla website utilizing Phoca Gallery, and the code it generates includes the following: <img class="pg-image" src="/images/phocagallery/other/thumbs/phoca_thumb_m_something.jpg" alt="So ...

cssimagejoomlaoverlay

Top button disappears in Chromium browser after fade-in effect

I've encountered a very peculiar issue. Whenever I use the page down or fragmented identifier to jump to a specific div, my "go to top" image disappears. Here is the code snippet: HTML: <a title="Go to top" href="#" class="back-to-top"></ ...

javascriptjqueryhtmlcss

Tips for maximizing the potential of the HTML5 <nav> element

While creating a theme with multiple menus in the header, I'm pondering whether to use separate nav tags for each menu or wrap them all inside one nav tag? You can see an example on codepen. header-a wraps everything inside a single nav tag. header ...

htmlnav

Tips on altering hover effects?

I am having trouble changing the font size and color of the a when hovering over p. I have been trying to figure this out for a while now, but I can't seem to get it to work. If anyone has any simple links related to this topic, I would greatly appre ...

htmlcsshover

The vertical alignment feature seems to be malfunctioning in Bootstrap 4

My goal is to center multiple images within their respective divs, but I am facing issues with vertical alignment not working as intended. Even the CSS classes d-flex justify-content-end and text-center are failing to align the icons side by side. I need t ...

htmlcssbootstrap-4

Hide the menu when a menu link is selected

After conducting extensive research, I have come across several scripts that can achieve what I am trying to do. However, I am unsure of how to implement them with my particular WordPress theme. Therefore, I am seeking assistance here: The theme I am usin ...

javascriptjqueryhtmlwordpress

What is the best way to link the value of a mat-slider to an input field in a reactive form?

Is there a way to synchronize the min and max values of a ranged mat-slider with corresponding input fields? Currently, when I set numbers in the input fields, the slider updates correctly. However, when I use the slider to change the value of the input fi ...

javascripthtmlangulartypescriptangular-material

MUI: tips for positioning text next to each other on a page

I need assistance aligning numbers and text side by side, similar to the image shown here: https://i.sstatic.net/gXzOM.jpg However, there is a margin to the right of the text(MASTER I 406), causing the numbers to not be in the correct position. Currently, ...

cssreactjsmaterial-ui

Expanding Anchors to Fit Content with FontAwesome Icons

I am attempting to include two clickable icons on the right side of a list item, but the anchors containing the icons seem to be expanding too wide without any padding or margins, causing their clickable zones to overlap. Could this be an issue with the f ...

htmlcssfont-awesomebootstrap-4

Checking the size of an HTML numerical input field?

When creating a form that accepts numbers, there may be a specific element, such as a phone number input named phNo, that needs to be exactly 7 digits long. To achieve this validation using JavaScript, the approach is: If the length of the element is not ...

javascripthtml

Tips for Accessing a New Website Using the Floating Layer Close Button

How can I trigger the opening of a new browser window when a visitor clicks the close "x" on my floating layer ad? The close button is within an HTML link code ("a href"), but simply putting a URL in there does not seem to work. <script language=" ...

javascripthtml

The function is not defined, even though it is located within the same file

I've encountered an issue with my web page where I'm trying to read data from an HTML data table and update it on a PHP file using AJAX queries in JavaScript. Everything was working fine until recently, even though I didn't make any signific ...

javascriptjqueryhtmlajax

Creating HTML tables with consistent vertical lines and broken horizontal lines

Looking to style an HTML table with unique grid-lines. Wanting continuous horizontal lines (foreground) and interrupted vertical lines (background), overlaid by the horizontal lines. Different line heights, some 1px, others 2px for variety. Vertical lines/ ...

htmlcss

Enabling and disabling links in a Bootstrap dropdown menu with dynamic functionality on click

One interesting feature of bootstrap is that it allows users to disable links within its dropdown menu component by simply adding a class="disabled" into the corresponding <li> tag. I am looking to create some Javascript code so that when a user sel ...

javascriptjqueryhtmlcsstwitter-bootstrap

Unable to modify the value of an HTML dropdown list

My latest project is a website located at pg.wcyat.me (Source code), where I utilized github.com/thdoan/pretty-dropdowns for dropdown menus. Using JavaScript, I am able to dynamically change the values of select lists. For example: document.getElementById( ...

javascripthtmljqueryhtml-select

Increase the identification of HTML element with jQuery

I've encountered an issue while trying to increment the id of 2 HTML elements, hwAddition and itemNumber, upon a button click event. The HTML code in question is as follows: <div id="hwAddition"> <div id="itemNumber" s ...

javascripthtmljquery

Listing pages with a title attribute and custom order

I came across a tutorial on this website that showed how to add a custom function called "mytheme_list_pages" to the functions.php file in order to include a title attribute in a link. Although it successfully adds the title attribute to the "href" output, ...

phphtmlwordpress

Issue with live Chrome page: SVG not displaying

Despite trying different solutions, my SVG is still not appearing correctly on my live website. It displays perfectly on my local server and computer, but once the site is live, the SVG disappears. The HTML code for my SVG uses an img tag wrapped in an a t ...

htmlsvg