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

Tips for preventing the unwanted portrayal of a rectangle on canvas?

As a beginner in javascript, I am currently learning about the canvas. I have a question regarding drawing rectangles from right to left and seeing negative numbers in the inputs. Is there a way to display the real size of the rectangle regardless of the d ...

javascripthtmlcanvasnumbers

"Using conditional statements to check for specific value ranges and properly handling cases where the result is undefined

Currently, I am working on a function that prompts the user to input a number and then displays a calculated score after they click a button. The score is based on the value entered by the user. While constructing this feature, I have pondered whether IF ...

javascripthtml

The focusable attribute in SVG is malfunctioning

I've utilized the focusable attribute to ensure SVG elements receive focus within an HTML document. My goal is to navigate through SVG elements in the SVG tag using the TAB key, as indicated in this resource (http://www.w3.org/TR/SVGTiny12/interact.h ...

javascriptjqueryhtmlsvg

Transitioning between pages causes a delay in loading the background

Today as I was working on my CSS, I encountered some issues. I utilized Bootstrap and Darkstrap for designing. In Darkstrap, the style for the body is body { color: #c6c6c6; background-color: #2f2f2f; } Meanwhile, in my own CSS: body { ...

httpcsstwitter-bootstrap

Add a React component to the information window of Google Maps

I have successfully integrated multiple markers on a Google Map. Now, I am looking to add specific content for each marker. While coding everything in strings works fine, I encountered an issue when trying to load React elements inside those strings. For ...

htmlreactjstypescriptgoogle-maps

Using AJAX to upload an image and passing multiple parameters

I'm facing an issue when trying to upload an image along with other input text in a form and send it to ajax_php_file.php. Whenever I upload the image, all my input text fields appear empty. Any assistance would be greatly appreciated. Thank you very ...

javascriptphpjqueryhtmlajax

unable to execute PHP code

I am attempting to execute a PHP file that will update a database. On Chrome, I am encountering this error: This is the code I have in my index.html file: <!DOCTYPE html> <html> <body> <input type="text" id="descriptioninput"> ...

javascripthtmlajax

Unexpected behavior observed when trying to smoothly scroll to internal links within a div, indicating a potential problem related to CSS dimensions and

Within a series of nested div containers, I have one with the CSS property overflow:hidden. My goal is to smoothly scroll to internal links within this specific div using jQuery. The snippet of code below has worked successfully in previous projects: ...

javascriptjquerycssscroll

I currently have some code for a toggle button and a collapse feature, but I'm struggling to integrate the two

I need assistance with implementing a toggle animation I found here: https://codepen.io/7harrypotterrr/pen/OrBwPY. I'm unsure how to apply it to my code and replace the current toggle button that is in use here: https://codepen.io/7harrypotterrr/pen/e ...

htmlcss

What steps can be taken to solve the JavaScript error provided below?

My objective is to create a new variable called theRightSide that points to the right side div. var theRightSide = document.getElementById("rightSide"); Once all the images are added to the leftSide div, I need to use cloneNode(true) to copy the left ...

javascripthtmlcssweb

Error: Attempting to append a child to a non-existent property

I am currently learning Java Script and this is the code I have been working on. <!doctype html> <html> <head> <style> div {position:absolute; width:500px; height:500px} img {position:absolute} ...

javascripthtmldom

Can you explain the differences between offsetHeight, clientHeight, and scrollHeight for me?

Have you ever wondered about the distinction between offsetHeight, clientHeight, and scrollHeight? What about offsetWidth, clientWidth, and scrollWidth? Understanding these differences is crucial for working effectively on the client side. Without this kn ...

javascripthtmldomoffsetheight

Is there a way to include a minimize button on a MaterialUi Table enclosed in a Paper component for easy table reduction?

I am trying to add a minimize button to either minimize my MaterialUi Table or the Paper component that wraps it. Here is the code I have so far: <TableContainer component={Paper} style={{maxHeight:'inherit', maxWidth:'inherit', boxS ...

htmlcssreactjsmaterial-uicss-tables

What is the process of generating a popup panel without relying on libraries, using JavaScript and CSS?

I'm currently working on creating a popup panel that is centered on the screen with rounded corners (scrollbars are unnecessary) using jQuery min, similar to this example: https://i.stack.imgur.com/0kYO6.png My progress so far: function (package) ...

javascriptcssdom

What could be causing the appearance of a mysterious grey box hovering in the upper left portion of my image and why is the code only adjusting the size of the grey box instead of the entire

I've been working on embedding some JavaScript into my Showit website to create a drag-and-drop feature that displays a collage/mood board effect. Everything is functioning correctly, but I'm running into issues with resizing the images. There&a ...

javascripthtmljquerycss

iframe failing to load link after initial attempt

As a beginner in using iframes, I have come across an issue that is puzzling me. I have a navigation bar and an iframe on my webpage. When I click on the "Search" link, it loads into the iframe without any problems and I can work within it. However, if I c ...

phphtmlcss

Navigational Scroll Parallax Issues

I have been trying to implement a basic 2 layer parallax effect using ScrollMagic on my index page. The layout consists of a large image with content below it, but I am facing some challenges. Despite going through the documentation and source code multipl ...

jqueryhtmlcssparallaxscrollmagic

Vanishing Span in CSS3 Flexboxes

I came across this particular HTML code: <div class="panel panel-info"> <div class="panel-heading">Person</div> <div class="panel-body"> <div class="data"> <p class="keys"> ...

htmlangularjscssflexbox

Avoid duplication of elements in Angular applications

Currently, I have a component that loads animated divs based on a datasource. *Note: In the example, I've used a lot of <any> because I haven't finalized the model yet. apiService.ts dataArray: Observable<Array<any>>; constru ...

javascripthtmlarraysangularobservable

Creating a CSS circle spinner with a half moon shape is an innovative way to add a unique touch

Image: Circular spinner rotating along the border rim of other solid circle For more details, please visit: https://codepen.io/sadashivjp/pen/oqqzwg I have created a UI codepen here and welcome any modifications or solutions. The code snippet is provided ...

javascriptjquerycsshtml