Position a span within a container div and ensure that it remains centered even in cases of overflow

I need assistance with centering text horizontally next to an image inside a container div that is 40px x 40px. The anchor tag contains the image with matching dimensions, and below it is a span with text. I've tried using text-align: center, adjusting position elements, and setting margins to auto in CSS, but haven't been successful. Any tips would be greatly appreciated.

HTML:

<div class="crsContainer">
    <a class="crsIcon" onclick="return false">
        <img id="" src="'.$crsRow['iconURL'].'"/>
    </a>
    <span class="crsTitle">'.$crsRow['courseTitle'].'</span>
</div>

CSS:

.crsContainer{
   width: 40px;
   height: 40px;
   position: absolute;
   -webkit-transition: all 1s;
   text-align: center;
   cursor: pointer;
   display: inline-block;

 }

 .crsIcon{
     position: relative;
     display: inline-block;

 }

 .crsTitle{
     position: relative;
     top: 5px;
     white-space: nowrap;
     margin: 0 auto;
     color: #3d3d3d;
     text-align: center;
 }

Answer №1

To move the span back by 50% of its own width, simply apply a CSS transform.

.crsContainer {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 50%; /* for demonstration purposes */
  -webkit-transition: all 1s;
  text-align: center;
  cursor: pointer;
}

.crsIcon {
  position: relative;
  display: inline-block;
}

img {
  display: block;
}

.crsTitle {
  position: relative;
  top: 5px;
  white-space: nowrap;
  color: #3d3d3d;
  text-align: left;
  display: inline-block;
  transform: translateX(-50%);
  border: 1px solid grey;
}
<div class="crsContainer">
    <a class="crsIcon" onclick="return false">
        <img id="#" src="http://lorempixel.com/output/city-q-c-40-40-4.jpg"/>
    </a>
    <span class="crsTitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, amet.</span>
</div>

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

When pasting Arabic text into an input box, the words in HTML appear to be jumbled and shuffled around

When I replicate this text يف عام and input it into a box, the output is shown as follows عام يف ...

What is the process of editing a webpage to affect the display on a different webpage?

I am currently working on creating two webpages. One will serve as a customization page where users can upload images and input text, which will then be displayed on another page. I am wondering if it is possible to achieve this functionality using CSS and ...

Using jQuery to animate a div when clicked by the mouse

Here's the scenario: I have 3 block elements arranged in a specific order: Image Hidden Text Block (.hidden) Footer Block (.blockimage) When the page loads, the image is displayed over the hidden text block (which contains further infor ...

To style a text box next to text within a paragraph in CSS, simply create an empty box

I have some CSS classes defined as follows: .p_box { position: relative; } .p_box span { background-color: white; padding-right: 10px; } .p_box:after { content:""; position: absolute; bottom: 0; left: 0; right: 0; top: ...

Disappearance of icon upon hovering in CSS

I am currently working with Angular JS (1.x) and I have a requirement to display tooltip text when hovering over an info icon. The tooltip text appears properly, but the issue is that the icon disappears when hovered over. It reappears once the hover is re ...

Using the HTML <span> and svg elements together does not allow them to be inline with each other

In my current scenario, I have a fieldset that is inline with another one on the page. The specific fieldset in question contains an SVG circle and some text. My objective is to have both elements inline with each other, while allowing the fieldset to adj ...

I'm having issues getting my fancybox to display properly

HTML: <!--gallery--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script> !window.jQuery && document.write('<script src="jquery-1.4.3. ...

Erase every picture contained within the element

<div id="uniqueidhere"> <span> <span><img src="image1link"></img></span> <span><img src="image2link"></img></span> <span><img src="image3link"></img></span> <span>&l ...

Are there any alternatives to PHP for implementing an auto-complete search feature?

I have decided to focus on using HTML, MySQL, JavaScript, and jQuery for my project. Though I understand that learning PHP would be beneficial in the long run, I don't have enough time to master it all within a week. As for the server-side, I will be ...

Unable to load CSS in Node.js when the parameter in Express.js is too long

I have been working on an application using Node.js, express.js, and ejs. I am utilizing the following code to incorporate ejs and load css: app.engine('.html', require('ejs').__express); app.set('views', __dirname + '/vi ...

Arrange the array in chronological order based on the month and year

I'm looking for assistance with sorting an array by month and year to display on a chart in the correct order. Array1: ['Mar19','Apr18','Jun18','Jul18','May18','Jan19'....]; Desired Output: ...

Customizing CSS float labels for individual inputs

For my project, I've implemented CSS code to create a floating label effect for form inputs. If you need the original code reference, it can be accessed here. However, since there are multiple examples in the original codebase, I have extracted and m ...

Expand the div to fit 100% width inside the Blueprint container

I am currently working on a website and considering using the Blueprint CSS framework. You can view the site I'm referencing here: http://jsfiddle.net/timkl/uaSe3/ The Blueprint framework allows for a nice 24 column grid layout. One challenge I&apos ...

Issues arise when the condition fails to function correctly during the process of form

I am currently working on a question from my elder brother's question paper, but I am struggling to solve it. The task is to create a form with two text fields, a radio button, and a submit button. The text fields should be named "account number" and ...

The onload event for embedding SVG files is not functioning as expected

I created an angular directive: <div> <embed ng-src="{{url}}" id="map" type="image/svg+xml/> </div> I am trying to trigger a function when the svg is fully loaded. To achieve this, I have added an onload action listener durin ...

Issues with JavaScript causing slideshow to malfunction

I'm experiencing some issues with my image slider. It seems that during the initial loop, the slideshow keeps reverting back to 'image3'. However, after the first loop, everything appears to work correctly. I am looking for a solution to ens ...

Any tips for avoiding a new line when generating html attribute values to prevent my json string from breaking?

When working with JSON string values in button element attributes, I have encountered an issue where a single quote causes the value to break and create newlines. For example: var $json = JSON.stringify('{"Long_text":"This is \'my json stri ...

When the user clicks the back button in AngularJS

After searching extensively, I have yet to find a straightforward solution to my issue. The problem lies in a search/filter field that filters the page based on user input. While this filter works efficiently, it clears whenever a navigation item is clicke ...

What is the maximum width allowed for a WordPress site on mobile devices?

I have been tasked with addressing the responsiveness issues on mobile for this particular site. However, I am struggling to understand why the website is displaying horizontal scrolling on the landing page in a mobile view. Any assistance in resolving t ...

What is the best way to incorporate an input bar in a Bootstrap panel header?

When designing a search box in my panel header, I floated both elements to get them onto the same line. Although functional, the vertical alignment of the title is displeasing and I am seeking a way to improve this without drastically changing its size. I ...