Words displayed on an image, perfectly aligned in the center

Check out this fiddle: http://jsfiddle.net/WdZeC/

<div class="text_align_center" style="text-align: center;">
    <div style="position: relative;">
        <img width="27" height="28" src="http://www.kavoir.com/img/text-over-image.jpg">
        <div style="position: absolute; left: 0; top: 0; width:27px; background-color: red;">1</div>
    </div>
    <div style="position: relative;">
        <img width="27" height="28" src="http://www.kavoir.com/img/text-over-image.jpg">
        <div style="position: absolute; left: 0; top: 0; width:27px; background-color: red;">1</div>
    </div>
    <div style="position: relative;">
        <img width="27" height="28" src="http://www.kavoir.com/img/text-over-image.jpg">
        <div style="position: absolute; left: 0; top: 0; width:27px; background-color: red;">1</div>
    </div>
    <div style="position: relative;">
        <img width="27" height="28" src="http://www.kavoir.com/img/text-over-image.jpg">
        <div style="position: absolute; left: 0; top: 0; width:27px; background-color: red;">1</div>
    </div>

<img width="27" height="28" src="http://www.kavoir.com/img/text-over-image.jpg"><img width="27" height="28" src="http://www.kavoir.com/img/text-over-image.jpg"><img width="27" height="28" src="http://www.kavoir.com/img/text-over-image.jpg"><img width="27" height="28" src="http://www.kavoir.com/img/text-over-image.jpg"><img width="27" height="28" src="http://www.kavoir.com/img/text-over-image.jpg"><img width="27" height="28" src="http://www.kavoir.com/img/text-over-image.jpg"><div class="left">
</div>

I am aiming to achieve the following:

 IMG IMG IMG IMG IMG IMG IMG

I want to overlay text onto the images, ideally at the center of them. Despite everything being set to text-align: center;, it appears that the text is still aligned to the left.

htmlcss

Answer №1

To achieve the desired layout, the outer container must have a relative positioning and text alignment set to center. The inner text should be positioned absolutely with a specific width.

For more information, check out this codepen:

You can also learn more about this topic from Chris Coyier's post: http://css-tricks.com/text-blocks-over-image/

Answer №2

RESOLVED: http://jsfiddle.net/WdZeC/1/

<div class="container" >
    <div class="text_align_center">
        <img width="27" height="28" class="img_under" src="http://www.kavoir.com/img/text-over-image.jpg" />
        <div class="over_img">1</div>
    </div>
    <div class="text_align_center">
        <img width="27" height="28" class="img_under" src="http://www.kavoir.com/img/text-over-image.jpg" />
       <div class="over_img">1</div>
    </div>
    <div class="text_align_center">
        <img width="27" height="28" class="img_under" src="http://www.kavoir.com/img/text-over-image.jpg" />
        <div class="over_img">1</div>
    </div>
    <div class="text_align_center">
        <img width="27" height="28" class="img_under" src="http://www.kavoir.com/img/text-over-image.jpg" />
        <div class="over_img">1</div>
    </div>
</div>



.text_align_center {
    margin: 0 auto;
    text-align: center;
    position: relative;
    width: 27px; height: 28px;
}
.img_under {
    position: absolute;
    top: 0; left: 0;
}
.over_img {
    width: 27px; height: 28px;
    position: absolute;
    top: 0; left: 0;
}

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

Assign a value of 0 to the ngModel if it is empty

I am trying to ensure that when the value is null, it defaults to 0. At the moment, I am utilizing Angular PrimeNG components. <p-calendar [(ngModel)]="model.start_time" [timeOnly]="true" placeholder="00:00"></p-calen ...

htmlangularprimeng

Using AngularJS to dynamically bind HTML content based on a variable’s value

I am trying to dynamically display an image of a man or a woman on a scene, depending on the gender of the person logged into my website. The ng-bind-html directive is working fine when I define "imageToLoad" statically. However, it fails when I try to gen ...

javascripthtmlangularjsdata-binding

The Angular application is not displaying correctly on mobile devices due to a lack

Having an issue with my angular build. I've deployed my website at this link: It appears fine when viewed on a desktop and even in the devtools. However, when I try to access it on my phone, the layout looks terrible! Any suggestions on how to fix ...

htmlcssjsonangularnpm

Safari does not support font-face rendering, unlike Chrome

I am in the process of creating a typewriter-style font page using a local font. I have used @font-face to import it, and while it displays correctly on Google Chrome, it does not render properly in Safari. You can view the web page here: (you will need ...

css

RangeError: The React application has surpassed the maximum stack size limit, causing an error to be thrown

Hey there, I could use a hand. I'm fairly new to React and attempting to develop an application for managing contacts by adding them to Local Storage and deleting them. Below is the code snippet from my App.js file: import React, {useState, useEffect} ...

javascripthtmlcssreactjstypescript

Tips for converting a styled MS-Access report to HTML with a template document

I am having trouble formatting my MS Access report using an HTML template. After doing some research, I discovered the following tags and tokens for MS Access HTML templates: <!--AccessTemplate_Body--> <!--AccessTemplate_FirstPage--> ...

htmlms-accessbootstrap-4

Appearing text dialogue

Can you tell me the name of the box that appears on top of a webpage? A couple of examples include: Facebook photos - It dims the background webpage and opens a separate pop-up to display pictures. Advertisements - The box that typically requires clickin ...

htmlcsspopup

Steps on integrating a map into a vuetify image

Is it possible to connect my v-img to a standard html map? Below is my code snippet. <template> <v-container> <v-row class="mx-1"> <v-col cols="12"> <v-row justify="center"> ...

htmlvue.jsvuetify.js

Applying conditional statements to an array's parent elements during iterations in JavaScript

Here is my complete script for relevance. I am currently looping through an array from a JSON object and populating content into an HTML div based on the content's ID. The process works well, but I am facing an issue with the logic related to the par ...

javascripthtmlarraysjson

Emphasize the interactions within the table cells based on their corresponding column and row

I'm looking to achieve a specific interaction in my Angular Material table. I want to highlight the table cell interactions with column and row by extending the highlighting up to the column header and left to the row header. Is this something that ca ...

htmlcssangularangular-material

:host ::ng-deep is not properly cascading styles to material checkbox

Struggling with changing the background color of a checkbox in a material multiselect. I've attempted both .mat-pseudo-checkbox-checked { background-color: #a9a9a9 !important; } and :host ::ng-deep .mat-pseudo-checkbox-checked { background-color: ...

javascriptcssangularangular-material

What is the importance of setting height: 0 when flex-basis: 0 is already defined in CSS3 flexbox?

I am currently working on creating a content reader with a fixed size and title that remains visible while scrolling. I attempted to achieve this using CSS3 flexbox with the following structure: .flex { display: flex; flex-direction: column; ...

htmlcssflexbox

Toggle the visibility of images with input radio buttons

Explanation I am attempting to display an image and hide the others based on a radio input selection. It works without using label, but when I add label, it does not work properly. The issue may be with eq($(this).index()) as it ends up selecting a differ ...

javascriptjqueryhtmlcss

What is the best way to center a heading element within a section on a webpage?

I need assistance aligning the h1 element with the specific class wish to the center of its section, both horizontally and vertically. Unfortunately, I have been unable to achieve this thus far. Any guidance would be greatly appreciated. Below you will fi ...

javascripthtmlcss

Placement of image links

Wondering if there's a way to accomplish this. Can a hyperlink be placed on specific coordinates within an image? Example: _____________________________________ | | | xxx | | xxx ...

javascripthtml

Steps for implementing a custom markup trigger with prettyPhoto:

Recently, I encountered an issue with my table view: https://i.sstatic.net/Fji2F.png Upon clicking the td, it should open the PrettyPhoto Lightbox In the default PrettyPhoto setup, the html trigger looks like this: <a href="images/fullscreen/2.jpg" ...

javascriptjqueryhtmlcssprettyphoto

Make sure to always display the browser scrollbar in order to avoid any sudden page

Question: How can I ensure the scrollbar is always visible in a browser using JavaScript? I've noticed that some of my web pages have a scrollbar while others do not, causing the page to jump when navigating between them. Is there a way to make t ...

htmlcssbrowserscrollbar

Getting rid of the outline on <html> while tabbing in Firefox

An odd outline keeps appearing as I tab through elements on a website, but only in Firefox and not in Chrome, Safari, or Opera. To identify the element causing the focus, I used Firebug console by typing: document.activeElement. It showed: >>> d ...

htmlcssfirefoxtabsoutline

What is preventing me from using the JavaScript toggle button multiple times?

I am currently trying to implement a JavaScript toggle button in two different sections on the same page, but I am encountering difficulties. I attempted to change the IDs as well, but it didn't seem to work. Is it not possible to achieve this, or am ...

javascripthtmlbootstrap-5

Ensuring that the text in the Bootstrap navbar is responsive for all screen

Yesterday, I inquired about how to modify my navbar menu to switch from horizontal to vertically arranged depending on layout. However, I've noticed that the responsiveness is not consistent when adjusting the window size. Is there a way to ensure my ...

javascriptjqueryhtmlcsstwitter-bootstrap