Creating a CSS class for text alignment in the center position

I've encountered a small issue with configuring some CSS elements.

Below is my index.html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="http://www.mywebsite.com/general.css" />
</head>
<body>
<text class="center" Welcome!>
</br>
<img src="<myimage>" alt="Logo" class="center">
</body>
</html>

and this is the content of my general.css file:

img.center {display:block; margin-left:auto; margin-right:auto;}
body{background-color:#b0c4de;}
text{font-family:"Lucida Console";}
text.center{font-family:"Lucida Console"; text-align:center;}

The image is centered as desired, but I'd like to ensure that all text on the site uses the "Lucida Console" font. Additionally, I want to create a specific class for centering text, similar to what's done for images.

If anyone could assist me in achieving this, it would be greatly appreciated. Thank you!

htmlcssfontshtml-helpercenter

Answer №1

It appears that the text element is not properly structured. There is no need to wrap text in a separate element, especially not in this manner.

Consider using the following CSS code:

p {
  font-family: 'Lucida Console'; 
}
p.center {
  text-align: center;
}

This will format your paragraphs as follows:

<p>Your text goes here</p>
<p class="center">Your centered text goes here</p>
<p>Your text goes here</p>

Furthermore, it is advisable to choose a class name that reflects the purpose of the content rather than just its appearance. For example, consider naming the class based on the type of information contained within the centered paragraph (e.g., 'message' or 'welcome message'). This approach ensures that the document structure and meta descriptions are defined by the classes, while the visual styling is controlled through CSS. If you later decide you want messages to be italicized instead of centered, you can simply adjust the class in the CSS file.

Answer №2

Uncertain why you are utilizing <body>, but here is an example for your reference:

http://jsfiddle.net/JPzRr/1/

img.center {display:block; margin-left:auto; margin-right:auto;}
body{background-color:#b0c4de;}
p {font-family:"Lucida Console";}
p.center {
    font-family:"Lucida Console";
    text-align:center;
}

<body>
    <p class="center">Welcome!</p>
<br />
<img src="<myimage>" alt="Logo" class="center">

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

The phrase "something<sup>something</sup>" is showing up as plain text and is not functioning as intended

Currently, I am faced with an issue involving the use of griddle.js and Handsontable in my React application. The problem lies in attempting to display a value with the sup tag. Unfortunately, instead of displaying properly, the output appears as plain tex ...

javascripthtmlreactjsgriddle

Using JQuery and Ajax, what is the best way to transfer information from a popup form to a PHP page?

I've noticed that my question has been asked a few times already, but I'm still struggling to get my code working. It seems like I'm using the same code as those solutions, so I can't figure out what's going wrong. Currently, I am ...

phpjqueryhtmlajax

What is the best way to separate content into columns with a border in WordPress?

Currently, I am in the process of creating an event list for a music band website using WordPress. The layout of the list consists of two columns, and my goal is to alternate the placement of each event so that they appear in a left-right-left pattern. Ho ...

htmlcssbordermultiple-columns

Height discrepancies in variables

When making changes to a phpBB forum, it is essential to develop a customized topic/posts view. To understand the issue better, refer to the image below highlighting Partitions 1 and 2. You can find the code I am implementing at this link. The outcome i ...

htmlcss-floatheight

Django Accordion Table Template

I have a Django model that populates a table with objects from a database. What I'm trying to achieve is, when a row in the table is clicked, to use JS or JQuery to accordion a table of objects that are connected as foreign keys to the main object. A ...

javascriptjquerypythonhtmldjango

Python CGI is failing to show the hyperlink in the webpage

With a database storing both a list of links and corresponding text, my goal is to display the text with their respective links using <a href. In attempting this within a for loop, I utilized the following code: for i in range(8): #print url_list[ ...

pythonhtmlcgi

Assistance needed with Chrome extension - seeking guidance on how to include the URL of the current page into the HTML of the default popup in the manifest.json file

I have a manifest file that looks like this: { "name":"Improve the Web extension", "version":"0.2", "manifest_version":2, "description":"Enhancing web accessibility is crucial. Poorly designed websites can exclude disabled individuals. By ...

javascripthtmlajaxjsongoogle-chrome-extension

Sharing images and descriptions on Twitter and Facebook using the `react-share` package: A step-by-step guide

This is the code I'm using for my helmet. <Helmet> <meta property="og:image" content={shareImg} /> <meta property="og:image:secure_url" content={shareImg} /> </Helmet> Here is the snippet of code for Twitter and Facebook ...

javascripthtmlreactjsnpm

How can I align elements to the right in an md-toolbar?

I am having trouble positioning the FAB speed dial within a toolbar to float on the right side. I have tried using float: right, but it did not work as expected. I also attempted using flex with offset="55", but this solution doesn't hold up when resi ...

cssangularjsangular-material

Tips for maintaining the button color when clicking and refreshing the page

By default, the color of my like button is gray. When a user clicks the like button, it will trigger the togglepost "like" function and the color will change to red. I am using AJAX to insert the data when the like button is clicked. If the user clicks the ...

javascriptphpjqueryhtmlcss

Guide to creating jQuery event handlers for active elements

After encountering a frustrating issue with Internet Explorer where an input cursor remained visible behind a div with z-index, I came across a solution here. However, I wanted to convert the solution into jQuery code. Original JavaScript: document.query ...

javascriptjqueryhtml

What is the best way to place an anchor so that it is perfectly aligned between a static header and footer?

I am looking to create a website where the content is placed below a fixed header and footer. Navigation is to be done through anchors, with only the active anchor being displayed while the rest remains hidden by the header and footer (similar to a window) ...

htmlcss

What is the best way to update a CSS class in React JS?

Suppose I have a CSS class called 'track-your-order' in my stylesheet. Whenever a specific event occurs, I need to modify the properties of this class and apply the updated values to the same div without toggling it. The goal is to replace the ex ...

javascriptcssreactjsstylesheetclassname

Clicking on elements within a Scrollview does not work when the Scrollview is set to an

Currently, I am facing an issue with my Scrollview as its children are not clickable despite having a position of absolute. Click events seem to just pass through them and interact with components below. I have searched extensively for a solution online, b ...

cssreact-nativescrollview

Tips for deleting an element from an array within the scope of AngularJS

A basic to-do list application with a delete button for each item on the list page: https://i.sstatic.net/s0Oxd.jpg Here is the HTML template code snippet: <tr ng-repeat="task in tasks"> <td>{{task.name}} - # {{task.id}}</td> <t ...

javascripthtmlangularjs

Tips for resolving the strange behavior on a webpage with multiple active buttons labeled "portfolio"

I'm currently dealing with an issue regarding the behavior of a particular webpage that is quite unusual. I have provided a link to the Github page where this issue is occurring. Interestingly, the problem seems to be resolved when I remove the nav ta ...

javascripthtmlcssbootstrap-4

Is there a way to incorporate HTML, CSS, and PHP into emails with PHPMailer?

Even though I have added CSS to the .php file, the emails I send are not displaying any CSS. I have set $mail->isHTML(true); and while HTML works, the CSS and PHP variables do not. This is the current appearance: https://i.sstatic.net/dLH8j.jpg. This ...

phphtmlcssphpmailer

A Webpage that is permanently open, with no option to close it. The only option is to watch the video in

Currently, I am designing web pages for artists to showcase their work in an upcoming exhibition. The pages are ready, but now the artists are requesting that each piece be accompanied by a laptop displaying a single webpage with a video providing informat ...

javascriptjqueryhtmlcssbrowser

Do not apply tailwindcss styles to Material-UI

I've been struggling to apply styling from tailwindcss to my MUI button. My setup includes babel and webpack, with the npm run dev script as "webpack --mode development --watch". tailwind.css module.exports = { content: ["./src/**/*.{js, jsx, t ...

javascriptcssreactjsmaterial-uitailwind-css

How to Customize the Size and Color of secureTextEntry Inputs in React Native

When it comes to styling a password input like the one below: <TextInput name="Password" type="password" mode="outline" secureTextEntry={true} style={styles.inputStyle} autoCapitalize="none" autoFocus={true} /> I also ap ...

javascriptreactjscssreact-nativereact-native-textinput