Tips for placing the html <a> tag above an image and centered

Here's the HTML code I'm struggling with, which is inside an ASP.NET Repeater:

<div class="team_member">
    <a class="teamMemberLink" href='<%# "Profile.aspx?uID=" + Eval("ID") %>' target="_blank"><%# Eval("Name")%></a> 
    <asp:Image ID="teamMemberProfileImage" CssClass="teamMemberImg" runat="server" ImageUrl='<%# "ImageHandler.ashx?id=" + Eval("ID") %>' />                                      
    <input id="rateTeamMember" class="teamMemberRating" type="button" value="" runat="server" />
    <input id="teamMemberID" type="hidden" value='<%# Eval("ID") %>' />
</div>

I'm facing a challenge where I need the anchor text to be positioned directly above the image and centered, but since the text length varies, I'm unsure how to achieve this with an image width of 96px.

Is there a way to determine the pixel width of the anchor text so it can be accurately positioned using jQuery (with 'position:relative' and setting the 'left' property)?

Additional information - here's my existing CSS code:

.team_member { float: left; margin-left: 10%; margin-top: 10%; text-align:center; }
.teamMemberLink { float: left; clear: left; position: relative; top: -20px; }
.teamMemberImg { width: 96px; height: 96px; float: left; border: 1px solid #d1c7ac; }
.teamMemberRating { float: left; }

Any assistance would be greatly appreciated :)

htmlcss

Answer №1

One issue that needs addressing is the excessive use of unnecessary floats in your code. To improve this, I suggest modifying the CSS as follows:

.team_member { 
    float: left; 
    margin-left: 10%; 
    margin-top: 10%; 
    text-align:center; 
    width:96px; 
 }
.teamMemberLink { display:block; }
.teamMemberImg { 
    display:block; 
    width: 96px; 
    height: 96px; 
    border: 1px solid #d1c7ac; 
}
.teamMemberRating { display:block; }

For compatibility with older versions of IE, it's important to set a width for any element with float:left;.

The use of float:left; on .teamMemberLink was causing alignment issues due to conflicting floats. By removing unnecessary floats from the CSS, this problem can be resolved.

You can view the updated version on JS Fiddle:

http://jsfiddle.net/NuSHQ/

Answer №2

Here's a solution:

<div style="width: 100px; text-align: center;">
    <a href="#">programming</a><br />
    <img src="#" />
</div>

Answer №3

Don't rush into using javascript right away! Consider setting your anchor text to a fixed length if your image is also fixed in length. By centering the text, its position won't be affected and it will resolve any issues that may arise if the text is too long to fit on one line by wrapping the excess to the next line.

a { 
    text-align: center;
    width: 96px;
    display: block;
}

Answer №4

Apply the team_member class in CSS with a style of text-align:center.

Experiment with setting the width of the "teamMemberLink" class to 96px;

See it in action on my example here: http://jsfiddle.net/has5V/1/

Need a link longer than 96px?

If you prefer elements not to be floated, consider using line breaks instead. Check out this alternate solution using
tags http://jsfiddle.net/has5V/2/

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

`how to insert finished HTML & CSS header into WordPress PHP documents`

After dedicating countless hours to studying, I still can't figure out how Wordpress will locate and utilize my alternate header. The code snippet below served as a helpful starting point: <!--?php /* */ if(is_page(23)) { get_header('about&a ...

phphtmlcsswordpress

Searching with beautifulSoup's find_all() method across a sequence of HTML tags

I need to find specific tags within tags using BeautifulSoup's find_all() method on a website. For instance, I want to search for data within: <li class='x'> <small class='y'> The issue is that my current code is r ...

pythonhtmlbeautifulsoup

Integrating HTML into a C# Windows form application

Just diving into the world of online shopping and came across an e-commerce cart that I'd like to integrate into my own website. The platform provided me with a HTML code snippet for embedding, which is great. However, I'm wondering if it's ...

c#htmlandroid-studiovisual-studio-2015embed

Center-align the table element

I've been struggling to center align this table element, specifically the one containing the square, but nothing seems to be working. Can anyone lend a hand in fixing this issue? <table> <tbody> <tr> <td>TURKEY - SU ...

javascripthtmlcss

Menu Drop on top of Flash player

A challenge I am currently facing is with my live event site and the list of events displayed in a mouseover menu. The issue arises when the flash streaming player remains in front of the mouseover menu, causing interference across all versions of Interne ...

htmlcssflashinternet-explorerflowplayer

Is the sidebar hidden only in Internet Explorer 7 and specifically not shown on one particular page?

So, I've been working on a website using Wordpress and created some custom page templates. However, I recently discovered that the sidebar on this specific page doesn't show up in IE 7. This page is using the lawyer.php template. I'm not su ...

csswordpresssidebar

Alignment of images at the center within a container div while maintaining a height of 100%

Apologies if this question has already been addressed - I have tried numerous methods to center images horizontally without success. This particular image just does not want to align in the center! For reference, here is the JSFiddle link HTML: (Please n ...

htmlcssimage

Unable to hear sound on Mozilla Firefox

I am facing an issue with playing an audio file using the audio tag inside the body element. The audio plays perfectly in Chrome once the body has finished loading, but it fails to play in Mozilla Firefox. I even attempted to download the audio file and pl ...

javascripthtmlcss

Populating a div with letter-spacing

I'm facing a challenge in populating a div with text using letter-spacing. The issue at hand is that I am unsure of the width of the div. Initially, my thoughts leaned towards using text-align= justify, however, I found myself lost in the maze withou ...

javascriptcsshtmlletter-spacing

Conceal four input fields depending on the option chosen from the dropdown menu

I need assistance with hiding multiple input boxes. Although I've tried using if and else, it seems to only work for two of the boxes. My current code is written in regular JavaScript, but I am open to exploring a jQuery solution as well. window.onlo ...

javascriptjqueryhtml

JavaScript: Finding the full Base-URL - A Step-by-Step Guide

Is there a way to incorporate JavaScript into external files without relying on the use of base/root URLs in HTML/PHP templates? Everything is functioning properly except for the need to determine the base/root URL in an included JS file. Dilemma: I am se ...

phpjavascriptjqueryhtmltemplates

Optimize data storage with javascript on Otree

I've been attempting to store the timestamp from a click in an Otree database, but I've tried using various codes without success. Here's the first code snippet: function myFunction() { var n = Date.now(); document.getElementById(" ...

javascripthtmlotree

Can jQuery UI modal dialog interfere with clicking events?

I am encountering an issue with a button that is supposed to display a popup when clicked. In my layout.jspx file, I have the following code: <div class="menuBtn"> <div class="search"> <span></span ...

javascriptjqueryhtml

What are some methods for simulating user interaction on input and button elements?

Here is a code snippet available in this stackblitz demo. Essentially, there is a basic form with an input field and a button. Clicking the button will copy the current value of the input to a label: https://i.stack.imgur.com/pw3en.png after click: htt ...

javascripthtmlangular

Using Javascript to place a form inside a table

When attempting to add a Form inside a Table, only the input tags are being inserted without the form tag itself. $(function () { var table = document.getElementById("transport"); var row = table.insertRow(0); var cell1 = row.insertCell(0); ...

javascripthtml

Clicking on an element will remove a class and unselect an input using JQuery

Trying to achieve a functionality where clicking on a list item with a radio button input selects it, but clicking again deselects it. The issue is despite various attempts, nothing seems to work properly. function setupToptions() { if ($('ul.top ...

javascriptjqueryhtml

Escaping multiple levels of quotations in a string within HTML documents

Currently, I am developing an application with Java as the backend and AngularJS 1.0 for the frontend. To display data tables, I am utilizing the veasy AngularJS plugin which I have customized extensively for my app. However, I am facing a small issue. I ...

javascripthtmlangularjsjson

Switching image sources depending on CSS prefers-color-scheme: A guide

In my endeavor to incorporate the latest CSS prefers-color-scheme media query into my website, I encountered a challenge. I have an img (image) element featuring a very dark blue image, which clashes poorly with the new dark mode setting. Is there a simpl ...

htmlcss

Is it possible to dynamically change a form's input value using a JavaScript keyup function based on input from other form elements?

My form utilizes the keyup function to calculate the total value of 3 input fields by multiplying them and displaying the result. Below is a fiddle showcasing this functionality: $(document).ready(function () { $(".txtMult1 input").keyup(multInp ...

javascriptjqueryhtmlformskeyup

Is there a way for me to display an alert notification when a website requests access to additional storage on my computer?

Is there a way to set up an alert notification in Internet Explorer when a website requests additional storage on your computer? The notification would ask: Do you want to grant permission for this website to use additional storage on your computer? ...

javascriptjqueryhtml