Trouble getting CSS text alignment to function properly

I attempted to apply text-align using CSS, but it doesn't seem to be working as expected. I have set the body alignment to center as well. Could this be causing an issue? Below is my CSS:

#Swell {
text-align: left;
}

Here is the HTML code:

<a id="Swell" href="https://www.swell.com">Use Swell Bottles<img src="https://s-media-cache-ak0.pinimg.com/originals/f9/93/95/f99395b48463ee8d3bfa16f32df51c98.jpg" height="50"></a>

Furthermore, here's the CSS for aligning the body text:

body {
font-family: sans-serif;
text-align: center; 
background-color: rgb(128, 212, 255);
}

If the text-align setting on the body element is affecting the outcome, how can I correct or override this error?

htmlcss

Answer №1

By default, an anchor element <a> is considered an inline element. This means it doesn't have width or height on its own and instead adjusts to the size of its content.

In your case, the text-align property is functioning as expected. The alignment is based on the container, which in this scenario matches the size of the content within it. Hence, there's no visible change in alignment.

To observe a difference, try changing the display property of the anchor element to block.

a{
display:block;
text-align:right;
}
<a>Blocking beautiful</a>

Edit: Adjusted to fit your requirements:

body{
text-align:center;
}

a{
display:block;
text-align:left;
}
<body>
<a>Still beautiful</a>
<span>centered</span>
</body>

Answer №2

html

<div id="parentdiv">
    <a id="Swell" href="https://www.swell.com">Check out Swell Bottles<img src="https://s-media-cache-ak0.pinimg.com/originals/f9/93/95/f99395b48463ee8d3bfa16f32df51c98.jpg" height="50"></a>
</div>

css

body {
font-family: sans-serif;
text-align: center; 
background-color: rgb(128, 212, 255);
}

#parentdiv {
    text-align: left;
}

Example

<html>
<style>
body {
font-family: sans-serif;
text-align: center; 
background-color: rgb(128, 212, 255);
}
    
#parentdiv {
text-align: left;
}
</style>
<div id="parentdiv">
<a id="Swell" href="https://www.swell.com">View the latest Swell Bottles<img src="https://s-media-cache-ak0.pinimg.com/originals/f9/93/95/f99395b48463ee8d3bfa16f32df51c98.jpg" height="50"></a>
</div> 
</html>

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 utilizing Jinja2 to produce a custom HTML email design?

I am trying to dynamically display data in an HTML email template using Jinja2 and Python. I am fairly new to both languages, but here is what I have accomplished so far: Started with my boilerplate code dynamic /dynamic.html /script.py I have cr ...

pythonhtmljinja2html-emailemail-templates

Animating CSS when closing a modal box

I followed the instructions from a tutorial on W3Schools here to create this code. The "open model" button triggers the modal to open with a smooth CSS animation, which looks great. However, when I click the close button, the modal abruptly closes without ...

javascriptcssanimationmodal-dialog

Enhancing the appearance of list options in Autocomplete Material UI by utilizing the renderOption feature

I'm putting in a lot of effort to customize the option elements in the autocomplete list. My plan is to achieve this using the renderOptions prop, where I can create DOM elements and easily apply styles with sx or styled components. However, somethin ...

javascriptcssreactjsmaterial-uiautocomplete

AngularJS enables the loading of directives dynamically, but sometimes encounters errors such as "Restricted URI access denied."

Presently, I am in the process of developing a small educational project using HTML5, CSS, JS and AngularJS. Hiccup: Loading an AngularJS Directive in my index.html file Error code [1] - Local browser Error: Access to restricted URI denied Various resp ...

javascripthtmlangularjsfilestructure

The checkbox display and hide functionality is mistakenly inverted

I have a form set up with an input field that should show or hide depending on whether a checkbox is clicked. Currently, the field is showing and hides when the checkbox is clicked. How can I reverse this behavior so that it works the other way around? ...

htmljquerycssbootstrap-4

Search field in DataTables appears to be misaligned

I'm in the process of developing a small website using JSP and DataTables (currently only for the first table). Here's what I have so far: As you can observe, there seems to be an alignment issue with the search field position. I'm n ...

javascriptjqueryhtmlcssdatatables

Utilizing numbered lists through HTML, CSS, and/or JavaScript

I am looking to accomplish something similar to this... My guess is that the images should be stored in an array in Javascript with the image links. However, I am uncertain if this can be done using only HTML and CSS. I found a solution on this thread, w ...

javascripthtmlcsshtml-lists

What could be the reason for the individual components not being populated within the listItem?

*** I am iterating through an array and calling the ListItem component for each item. However, only one ListItem is being populated when there should be 3. Can someone please help me figure out what's wrong? *** Here is my code in App.js *** import F ...

javascriptcssreactjs

What could be causing the malfunction of this form's submission request?

I'm encountering an issue with a simple login form I have that I want to post to ASP.Net MVC. It seems like when I set the action to /Login, it works perfectly fine. However, if I specify the action name as "/Login/Index", it fails. The server sends b ...

asp.nethtmlasp.net-mvc

Even after being removed, the input field in Firefox stubbornly maintains a red border

I have a project in progress that requires users to input data on a modal view and save it. The validation process highlights any errors with the following CSS snippet: .erroreEvidenziato { border: 1px solid red; } Here is the HTML code for the moda ...

javascriptjqueryhtmlcssfirefox

The CSS rule that is determined to have the nearest bounding class will emerge victorious

Imagine this interesting situation in HTML: <div class="red"> <div class="blue"> ... <-- maybe more nested parents <div class="x">Test</div> </div> </div> If we consider the following ...

htmlcsscss-selectors

Is there an image overlapping another image?

Currently, I am working on developing a website for a Food Cart project in my class. One of the key features I want to incorporate is the ability for users to click on an image of a plate and have a different image representing the food appear on top of it ...

javascriptjqueryhtmlcssmouseclick-event

Adaptable Bootstrap Button that Adjusts to Different Screen Sizes

I want this button to adjust its size according to the screen dimensions. The current code keeps the button fixed in place. See below for the code snippet. <button type="button" [className]="'btn btn-block m-0'" kendoButton ...

cssangularresponsive-designbootstrap-5

When refreshed using AJAX, all dataTable pages merge into a single unified page

I followed the instructions on this page: How to update an HTML table content without refreshing the page? After implementing it, I encountered an issue where the Client-Side dataTable gets destroyed upon refreshing. When I say destroyed, all the data ...

javascriptphpjqueryhtmlajax

Access the style of the first script tag using document.getElementsByTagName('script')[0].style or simply refer to the style of the document body with document.body.style

Many individuals opt for: document.getElementsByTagName('script')[0].style While others prefer: document.body.style. Are there any notable differences between the two methods? EDIT: Here's an example using the first option: ...

javascriptcssstyles

Is there a way to modify the badge class color in Bootstrap 4 using CSS?

The badge class in Bootstrap v4.3.1 is defined as follows: .badge { display: inline-block; padding: 0.25em 0.4em; font-size: 75%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; ...

cssbootstrap-4

Customize the style attribute in Bootstrap 4 using Popper.js

I've been attempting to adjust the position of a dropdown element, but I'm struggling to make it work. Utilizing Bootstrap 4 with Popper.js, I simply added a default dropdown without any custom styles to my page. However, it automatically applies ...

htmlbootstrap-4popper.js

What is the best way to ensure my php variable is easily accessed?

Recently, I've been working on implementing a timer and came across the idea in a post on Stack Overflow. <?php if(($_SERVER['REQUEST_METHOD'] === 'POST') && !empty($_POST['username'])) { //secondsDif ...

javascriptphpjqueryhtmlajax

Which shortcuts or techniques in jQuery/JavaScript can I implement to simplify this code further?

I've written a script to handle responsive design for smaller devices and display a toggle menu instead of a full-width menu. The current script works, but I find it messy. How can I make this code more minimalistic and efficient? Is it good practice ...

javascriptjquerycssjquery-events

Sending information from one page to another and then sending it once more

I am currently utilizing the following code to submit a form's data to : <script type="text/javascript"> $(document).ready(function(){ $("#textnextofkin").validate({ debug: false, rules: { ...

phpjavascripthtmlajaxforms