Aligning text vertically within an HTML <a> tag block

Calling all CSS experts! I'm struggling with aligning text to the bottom of a block element with a fixed width and height that contains a background image and a title. I've tried using display: table-cell; and vertical-align: bottom; without success. Other methods like adjusting line-height result in weird dotted lines around the element. I even attempted placing the text in a span within the a tag, but the underline moved to the bottom instead. Any guidance would be greatly appreciated. - Richard

htmlcsstagsvertical-alignment

Answer №1

To position an element at the bottom of its parent element, you can use display:table for the parent element and display:table-cell with align:bottom for the element you want at the bottom.

Answer №2

Which browsers are you focusing on? This code is tested and works well in IE8.0.6 and FireFox 3.5.8:

<a style="display:block;height:200px;width:200px;background:blue;display:table-cell;vertical-align:bottom;">This is a test</a>

It's important to note the use of both display:table-cell; and vertical-align:bottom;. Both are necessary for the desired effect. Have you tried using both of them?

If you are facing issues with this code (especially in IE6), you might need to place your <a> element inside a block-level element and then adjust its position accordingly.

<div style="position:relative;top:0px;left:0px;height:200px;width:200px;background:yellow;">
    <a style="position:absolute;bottom:0px;">Your text</a>
</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

Styling elements with CSS to display inline blocks next to each other while taking up the full

I am facing a challenge with two text blocks of varying lengths. The left block contains short text while the right block may have lengthy content. Both blocks need to be displayed side by side, occupying 100% of the parent's width exactly. For a sim ...

htmlcssweb

Altering the appearance of a component that is currently selected and in use

Currently, I have incorporated a component with its selector within another component as shown below: <div class="col-xl-4" style="margin-bottom: 30px;"> <app-patient-info-accordion *ngIf="patient" [cardTitle]=&qu ...

htmlcssangularangular-components

Instructions for turning an HTML table cell into an editable text box

Essentially, I'm looking to enable users to click on the table and edit the text within it. I found inspiration from this Js Fiddle: http://jsfiddle.net/ddd3nick/ExA3j/22/ Below is the code I've compiled based on the JS fiddle reference. I tho ...

javascriptjqueryhtmlhtml-table

Creating links within a single image in HTML?

Is there a way to hyperlink different parts of a single image to various webpages using JavaScript coordinates or any other method? ...

javascripthtmlcss

Typescript tutorial: Implementing a 'lambda function call' for external method

The Issue Just recently diving into Typescript, I discovered that lambda functions are utilized to adjust the value of this. However, I find myself stuck on how to pass my view model's this into a function that calls another method that hasn't b ...

javascripthtmlknockout.jslambdatypescript

The header logo will have an absolute position to overlay the navigation menu when the screen is resized

I am currently working on a website layout that involves using position: absolute for the logo to overlay another div below it, purely for stylistic reasons. While I have achieved this effect, it doesn't translate well into responsive web design. When ...

htmlcss

Organize items within a compartment using Bootstrap3

I have decided to update my website to Bootstrap3 and encountered a common issue that many others seem to be facing as well. I am trying to evenly distribute 4 elements, each approximately 220px wide, inside a 990px container. In the old version of Bootstr ...

csstwitter-bootstrapresponsive-designtwitter-bootstrap-3

Locate button elements with the class "button" that do not have any images inside them

Below is the code I am currently using for buttons (I prefer not to change it): <a href="#" class="button"> Button text <img src="someimage.png" /> </a> This CSS styled code creates a sleek button with an icon. To round the left sid ...

jqueryhtmlcss

In an HTML document, you may encounter whitespace that is not present in JSFiddle

Upon running this HTML file in my browser, I noticed that there is an 18px gap at the top of the first div. It's strange because this issue only occurs when I run the HTML locally on my browser, but everything works fine on JSFiddle. I'm puzzled ...

jqueryhtmlcss

What is the best way to assign a JavaScript return value to a PHP variable?

Is it possible to capture the return value of a JavaScript function that checks if text boxes are empty and assign it to a PHP variable? I have successfully created a JavaScript function that returns false if any of the text boxes are empty, but now I ne ...

javascriptphphtml

Guide to positioning an item at the bottom of the screen using Material UI

Can anyone help me align a button to the bottom of the screen so that it remains in place even when scrolling through a list? I've tried adjusting the code but can't seem to get it right. This is how my current screen appears, with the button al ...

htmlcssreactjsmaterial-ui

Can the color of the expanded navigation bar in Bootstrap 4 be customized?

I'm currently in the process of developing a Bootstrap website and was wondering whether it is feasible to add a background color to the expanded navbar specifically on small screens. Feel free to refer to the images below for a visual representation ...

htmlcssbootstrap-4

retrieve the webpage hosted on the server

Seeking to develop a website where users can input a website URL and have it loaded from the server hosting the HTML page, rather than from the user's computer as iframe does by default. I've experimented with various techniques but all seem to l ...

javascripthtmlwebserver

What is the proper way to utilize the name, ref, and defaultValue parameters in a select-option element in React Meteor?

I recently developed a Meteor project using ReactJS. I have a Create/Edit page where I use the same input field for various form elements. Here is an example of code snippet that I currently have: <FormGroup> <ControlLabel>Province</Control ...

javascripthtmlreactjsmeteorreact-bootstrap

Looking for a substitute for iframes when using jQuery UI tabs?

I currently have a Spring-based web application that integrates with jQuery Tabs. What I'm doing is building a data string with specific parameters and appending it to a URL: var hrefData = "?" + item1 + "&" + item2 + "&" + item3; var href = ...

javascriptjqueryhtmlajaxjquery-tabs

Confusion between Codeigniter's URL and base_url() function

$config['base_url'] = 'localhost/project'; <link href="<?= base_url(); ?>/css/bootstrap.min.css" rel="stylesheet"> An issue arises with the CSS not loading on the view due to a double '/' in the URL. This occur ...

phphtmlcsscodeigniter

Changing the sliding underline effect in a jQuery navigation bar

Recently, I implemented a sliding underline element in my navigation bar. The idea is that when a link is hovered over, the underline smoothly transitions to that element. You can take a look at the codepen example here: https://codepen.io/lucasengnz/pen/e ...

javascriptjqueryhtmlcss

Creating a Functional Right Arrow on a Pure CSS Select Menu/Dropdown

I have implemented a custom select/dropdown menu by following the solution provided here: The functionality works well, but I am facing an issue where the dropdown options only appear when clicking on the box. Clicking on the 'arrow' located on ...

htmlcssdrop-down-menu

Ways to create a sequential appearance of elements through CSS animations

Can you help me achieve a wave effect for elements appearing one by one using CSS animation (jQuery)? Currently, all the elements show up at once and I want to create a wave-like motion. Any assistance would be greatly appreciated. $(window ...

javascriptjquerycss

Two child DIVs within a single parent DIV

I am struggling to keep two divs side-by-side within a parent div. Initially, I was able to position the image in the right div successfully, but when resizing the elements, everything became disorganized and I can't seem to fix it. As a beginner, I w ...

htmlcss