When text and a link are placed on the same line, they will not be properly aligned

I'm trying to align the text 'Made by XYZ' in the center and have the 'Return to Top' link on the right side of the same line. However, my current code doesn't seem to be achieving this. What am I missing?

<div id="footer_container">
    <span style="text-align: center">Made by XYZ</span>
    <span style="float: right"><a href="#top">Return to Top</a></span>
</div>

Below is the CSS for the footer container:

#footer_container
{
    background: #7fc041;
    bottom: 0;
    height: 1.9em;
    left: 0;
    position: fixed;
    width: 100%;
}
htmlcss

Answer №1

To center align your footer, apply the text-align:center property directly to the footer container rather than using a span (learn more about alignment properties for block level elements here). Additionally, there is no need to use a span to float your anchor tag:

HTML

<div id="footer_container">
    <span>Made by XYZ</span>
    <a href="#top" style="float: right">Return to Top</a>
</div>

CSS

#footer_container
{
    background: #7fc041;
    bottom: 0;
    height: 1.9em;
    left: 0;
    position: fixed;
    width: 100%;
    text-align:center
}

Here is a working fiddle example.

Answer №2

Here is an alternative approach:

#footer_container
{
    background: #7fc041;
    bottom: 0;
    height: 1.9em;
    left: 0;
    position: fixed;
    width: 100%;
    text-align: center
}

<div id="footer_container">
    <span>Created by ABC</span>
    <span style="float: right"><a href="#top">Back to Top</a></span>
</div>

View the code snippet

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

What are the steps to add 8 columns to the second row in my table?

this is an example of HTML code that showcases a table structure with multiple rows and columns. You can view the full code snippet here. The table includes different sections, such as section1, section2, section3, and section4 in the first row (tr). In t ...

javascriptjqueryhtmlcss

The navigation for both the Bootstrap 4 Card Slider and Half Slider is identical

I've noticed an issue with my Card slider and half slider. Whenever I navigate through the Card slider, the half slider also moves along with it. However, this is not the case when navigating the half slider; the Card slider remains stationary. It see ...

javascriptjqueryhtmlcssbootstrap-4

Blazor Shared CSS File

Currently, I have successfully implemented 2 pages in my Blazor app: Login.razor located in the Auth folder AddPerson.razor situated in the Profile directory At this point, I have managed to integrate a CSS file specifically for the AddPerson.razor page ...

c#cssblazor

Adjust the size of an image based on the smaller dimension utilizing CSS

Allowing users to upload images that are displayed in a square container in the UI presents challenges. The uploaded images can vary in size, aspect ratio, and orientation, but they should always fill the container and be centered. To address this issue, ...

cssimagedynamic

The jQuery function is not functioning correctly

Currently, I am in the process of setting up an accordion menu using jQuery and CSS3. Everything is working perfectly fine so far except that the menu always opens upon page load and the code to hide it is not functioning as intended. Here's the link ...

jquerycss

Retrieving information from an API and presenting it as a name with a link to the website

I am attempting to retrieve information from an API and present it in the format Name + clickable website link. Although I have managed to display the data, the link appears as text instead of a hyperlink. Here is my Ajax script: $(function() { ...

javascripthtmlajax

Having trouble with the rounded-circle class in Bootstrap 5?

@import url('https://myfonts.com/css?family=Roboto&display=swap'); body { background: #f1f2fa; font-family: 'Roboto', sans-serif; } hr { border: 2px solid #0b5ed7 } .crd { background: #f1f2fa; transition: all; ...

htmlcssvisual-studiofrontendbootstrap-5

How can I ensure that a jQuery function completes its fading animation before changing the text content?

I have been working on a project where my javascript application is receiving messages from my python program connected to a chat room. The main objective is to update the text of an html paragraph to display "thank you + user" for each chat message, by fa ...

javascriptjqueryhtmlfade

ExpressJS encountered an error due to an unsupported MIME type ('text/html') being used as a stylesheet MIME type

Whenever I start my NodeJS server and enter localhost:8080, I encounter the mentioned error while the page is loading. The head section of my index.html file is provided below. It's puzzling to me why this error is happening, considering that my index ...

javascripthtmlcssnode.jsexpress

Validate User Input Using jQuery to Check if Empty or Deleted

Users can enter text into an input field, and an image will be displayed if the input is valid or invalid. I want to remove or change the image when the input field is empty. Despite writing the following code, it doesn't seem to work: $('#inpu ...

javascriptjqueryhtml

Change a variable on the fly without needing to reload the page

<!DOCTYPE html> <!-- To update your slot machine images without refreshing the page, you can use JavaScript to dynamically change the images on click. Here's a simple example using JavaScript: <html> <head> <title& ...

phphtmlcss

Making rapid formatting changes by rearranging the positioning of words in Javascript

Struggling to untangle my complex code, I'm unable to make the necessary adjustments. Here's what I have: var stocks= [ ["Beef (80/20) raw","oz",115.4451262,3.293742347,72,"4.85 gallons","5.65 pounds","0 - ",2.142,19,20,"0.0001275510204"," ...

javascriptjqueryhtmlcss

The form tag exceeds its boundaries only for the initial message

Each message in my loop has a form that allows users to favorite it. However, I am facing an issue where the form is not being printed properly for the first message only. The buttons inside the form are going out of bounds. Here is my HTML and PHP code: ...

phphtml

Unconventional appearance of WordPress Jetpack sharing buttons on unique custom theme

Currently, my wordpress blog has a unique theme and is powered by Jetpack. I've activated Sharing and added various social media sharing services like Facebook, Twitter, Google+, Digg, among others in the "Enabled Settings" section. However, the sha ...

phphtmlcsswordpress

Working towards ensuring my website is responsive

Hello, I am a CSS beginner currently working as an intern. My task is to make a website's CSS compatible with Internet Explorer, and then make it responsive and scalable. Essentially, the design should retain its appearance when the window size change ...

javascripthtmlcss

Ways to simultaneously apply fade in and fade out effects using CSS

body { background-image: url("background.jpg"); background-attachment: fixed; font-family: 'Roboto', sans-serif; color: #333333; } #container { height: 1000px; } /* HEADER WITH NAVIGATION BAR AND LOGIN OPTION */ #head { position: abso ...

javascriptjqueryhtmlcss

How do I implement the maximum value between 100% and max-content in CSS?

My width should always be set to 100%, unless the content requires a longer max-content size. width: max(100%, max-content); I tried something like this but it didn't work as expected. ...

csswidth

Is there a bug in IE9 with CSS precedence?

Two CSS rules are in place: .avo-lime-table th, .avo-lime-table td { background-color: grey; } Next rule: .avo-lime { background-color: green; } All is functioning correctly in FireFox, Chrome, Opera and Safari. However, as usual, Microsoft&apos ...

cssinternet-explorerfirefoxoperator-precedence

Bizarre Actions of a JavaScript Object

Currently, I am in the process of developing a Multiplayer game using Phaser and Eureca io. My main focus right now is on perfecting the authentication of players and their controls. To achieve this, I have implemented a method on the server that retrieves ...

javascripthtmlfunctionobjectphaser-framework

What is the best way to retrieve multiple image file names using JavaScript?

I attempted to use the code snippet below to retrieve the names of all the images I selected, however when I used 'alert', I only received one name even though I selected multiple. My goal is to have all the names of the selected photos saved in ...

javascripthtml