What is the best way to perfectly center text within an image, maintaining both vertical and horizontal alignment, all while being contained within an <a> tag?

I've been working with this code snippet. When I set the position of .thumb-title to absolute and use bottom: 50%, it shifts upwards in relation to its own height.

.project-thumb {
  position: relative;
}
.thumb-title {
  font: 400 1.5rem 'Lato', sans-serif;
  position: absolute;
  bottom: 50%;
  text-align: center;
}
<li>
  <a class="project-thumb" href="ktc.html">
    <img class="thumb" src="thumbs/thumb-201612t-ktc.jpg">
    <h3 class="thumb-title">Sample text</h3>
  </a>
</li>

htmlcss

Answer №1

When determining the width of the thumb, you can implement display:inline-block;, vertical-align:middle, text-align:center;, and adjust the margin as needed to center the content without relying on absolute or transform.

.project-thumb,
.project-thumb h3 {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 150px;/* thumb's width */
  box-sizing: border-box;/* consider borders or padding*/
  color: initial
}
.thumb {
  vertical-align: middle;
  margin-right: -150px;/* reduce width virtually to align text */
}
.thumb-title {
  z-index: 1;/* ensure it appears above image*/
  text-align: center;
}
<a class="project-thumb" href="ktc.html">
  <img class="thumb" src="http://dummyimage.com/150x150/aaaaaa/aaaaaa&text=."><!-- 
  make sure to maintain white space for inline-block elements
  --><h3 class="thumb-title">
      Sample text</h3>
</a>
 

<a class="project-thumb" href="ktc.html">
  <img class="thumb" src="http://dummyimage.com/150x150/aaaaaa/aaaaaa&text=."><!-- 
  remember to preserve white space for inline-block elements
  --><h3 class="thumb-title">
      Two lines <br/> of text</h3>
</a>

Edit: It seems you mentioned using a flexbox in another answer. Here is a version with Flexbox, based on your layout and CSS.

.project-thumb,
.project-thumb h3 {
  display: inline-flex;
  position: relative;
  width: 150px;/* thumb's width */
  box-sizing: border-box;/* consider borders or padding*/
  color: initial;
  justify-content:center;
}
.thumb {
  margin-right: -150px;/* reduce width virtually to pull text */
}
.thumb-title {
  z-index: 1;/* ensure it appears above image*/
  margin:auto 0;
}
<a class="project-thumb" href="ktc.html">
  <img class="thumb" src="http://dummyimage.com/150x150/aaaaaa/aaaaaa&text=."><!-- 
  make sure to maintain white space for inline-block elements
  --><h3 class="thumb-title">
      Sample text</h3>
</a>
<a class="project-thumb" href="ktc.html">
  <img class="thumb" src="http://dummyimage.com/150x150/aaaaaa/aaaaaa&text=."><!-- 
  remember to preserve white space for inline-block elements
  --><h3 class="thumb-title">
      Two lines <br/> of text</h3>
</a>

Answer №2

To center-align the content in a .project-thumb, you can use the text-align: center; rule and position the title using the left: 50%; with transform: translate(-50%,-50%); for the .thumb-title element:

.project-thumb {
  position: relative;
  display: inline-block;
  text-align: center;
}
.thumb-title {
  font: 400 1.5rem 'Lato', sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 0;
  margin: 0;
}
<li>
  <a class="project-thumb" href="ktc.html">
    <img class="thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfUCAwWIxZtCx0SAAAAHXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBUaGUgR0lNUO9kJW4AAAInSURBVHhe7dXRCcMwEAXBU/rvWXZw4o/gbAUzcEgNLG/NzD4PePD6vMCDe0H2NiTwtdY7DQsCSSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAk...included)>
    <h3 class="thumb-title">Sample text</h3>
  </a>
</li>

Answer №3

Appreciate the assistance! I did some testing and found a solution that worked for me:

Here's the HTML snippet:

<li>
    <a class="project-thumb" href="ktc.html">
        <img class="thumb-img" src="thumbs/thumb-201612t-ktc.jpg">
        <h3 class="thumb-title">Sample text</h3>
   </a>
</li>

And here is the CSS code:

.thumb-project {
display: inline-block;
position: relative;
}

.thumb-img {
width: 100%;
height: auto;
}

.thumb-title {
font: 400 1.2rem 'Lato', sans-serif;
position: absolute;
width: 100%;
bottom: 50%;
text-align: center;
opacity: 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

"Enhance Your Website with Dynamic Text Effects using JavaScript

Is there a way to continuously animate text during the loading process of an AJAX request? I've tried implementing various methods, such as using a setTimeout function or an infinite loop, but nothing seems to work for repeating the animation once it& ...

javascripthtmlcssanimation

Creating a new form upon clicking

By clicking the "Add New Job" link, a new form with three fields will appear. This is the primary form: <h2>JOB EXPERIENCE 1</h2> <div class="job-content"> <input type="text" value="Company" name="company" /> <input type="te ...

phpjqueryhtmlajax

Is it possible to convert the text.json file into a jQuery animation?

Looking to extract information from text.json and integrate it with my jquery.animation(). My goal is similar to the one demonstrated here. Instead of using "data" attributes like in that example, I want to parse the text based on the "ID" property as a k ...

javascriptjqueryhtmlcssjson

The arrow extends just a hair below the boundaries of the div, by approximately 1 pixel

I am facing an issue with my nav bar code. In Firefox and Chrome, everything works perfectly fine - there is a small arrow displayed below the links when hovered over. However, in Internet Explorer, the arrow appears slightly below the div, causing only pa ...

htmlcss

Two-toned diagonal design featuring a lone character

I'm searching for a unique design featuring the letter "d" in two colors, arranged diagonally without any gradient effects. Here is the CSS code I am currently using: .gradient_text_class { font-size: 72px; background-image: linear-gradient(50de ...

htmlcss

Challenge with Alignment of Fields in Bootstrap's Horizontal Form

I am working on an Angular project with a horizontal form using Bootstrap. I have encountered a slight alignment issue with one of the date fields. The IsMessedUp datepicker input field is not aligned properly, positioned slightly to the left compared to t ...

htmlangularjstwitter-bootstraptwitter-bootstrap-3

Tips on saving HTML table information into a .txt document?

Welcome to my Unique HTML Table. <table> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Email Id</th> <th>Phone Number</th> <th>Prefered C ...

javascriptjqueryhtml

Inconsistencies observed during the native JSON import process in JavaScript

Encountered a strange behavior when loading a JSON file into JavaScript while working on a React project. Seeking an explanation and guidance on properly accessing data from the JSON data store. The JSON file contains product data: { "product ...

javascripthtmlreactjsjson

What is the best way to center a div horizontally on all screen resolutions using only CSS?

The margin: 0 auto declaration is not having the desired effect for some reason. I have attempted using text-align in the header, as well as exploring various other options, but none seem to be working. This is my current code: div.middle { font-fami ...

htmlcsscenter

How can you compare input text to the input value attribute using jQuery?

Consider this scenario: the page displays the following input element... <input class="textInput error" id="accountMailaddress" name="user[email]" size="30" type="text" value="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail=" ...

jqueryhtmlformsinput

I am looking to extract specific data from a webpage using Webscraping and page_soup.findAll, but I am unsure of the correct method to do

I'm currently working on a web scraping project and I'm trying to extract the keywords from a webpage. I attempted to use page_soup.findAll() for extraction, but I'm unsure of what to include between the parentheses to get the desired inform ...

pythonhtmlweb-scrapingbeautifulsoup

Converting CSS to LESS with multiple classes sharing the same properties: step-by-step guide

I have some CSS code here that I'd like to convert into LESS format. Can you help me with that? .A .B h4, .A .B h4 a, .A .C h4, .A .C h4 a, .D h4, .D h4 a { color: #345e8a !important; display: inline-block; font-family: @font-family-sans ...

htmlcssless

What is the best way to make a hyperlink in HTML open in the same page or window, without relying on the <iframe> tag or JavaScript?

I have two html files and one css file. My question is how to open the link monday.html on the same page or window in my content section. For example, when someone clicks on the Monday navigation button, I want the result to show up in the content section ...

htmlcssiframe

Utilizing MySql in HTML Buttons Using PHP

PHP $con=mysqli_connect("localhost","root","","mmogezgini"); $menuler = mysqli_query($con,"SELECT * FROM menuler"); while($menu = mysqli_fetch_array($menuler)) { echo "<button class=\"ust_link\" onClick=\"window.location.href ...

phphtmlmysql

Is it possible to craft poetic lines with indents in HTML using blockquotes, pre, or dd tags?

I am struggling to format a few lines of text with indentations using HTML. Here is an example I found: HERE Below is my attempt: <p><code>"Knowing is not enough. We</code></p> <p><blockquote><code>must apply. Wi ...

htmlpredd

Use CSS bracket attribute to conceal link with no HTML access

I am unable to modify the HTML code, but I need to find a way to hide the link (#wall). <td class="status_value"><span class="online"> - <a href="#wall"> Leave a Comment </a> <a href="#today"> ...

htmlcss

What steps can I take to address the div issue in my React application?

After implementing Browser Router, I am encountering whitespace on the left and right side of the navbar. How can I resolve this issue? Below is the code snippet: <div className="container my-3"> <BrowserRouter> ...

htmlcssreactjsnavbar

Problem with Flickity's is-selected feature

I am currently exploring Flickity and its functionality. I have a carousel that auto-plays, with the selected cell always placed in the middle and highlighted with a grey background. However, I would like to customize it so that the selected cell is positi ...

htmljquerycssflickity

Setting the dimensions of an HTML - CSS block

I am trying to style a navigation bar using the following CSS code: #nav {} #nav a { position: relative; display: inline-block; color: #F0F0F0; width: 1em; height: 2em; line-height: 0.9em; } #nav a.ic ...

javascripthtmlcss

Guide to updating 2 iframes simultaneously with a single link/button using HTML and JavaScript

Just joined the community and looking for help on how to refresh two different iframes within a single page. I came across a solution on Google that involves using getElementById. However, I've heard Firefox can be tricky with IDs. Appreciate any as ...

javascripthtmliframerefresh