Making a centered text class in CSS_问答_开发者

开发者 https://www.devze.com 2023-04-11 12:27 出处：网络

I\'m having a bit of trouble setting up some CSS stuff. Here is my index.html: <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"

I'm having a bit of trouble setting up some CSS stuff.

Here is my index.html:

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

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

and here is 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;}

My image is centered, like I want it to be. How开发者_如何学Goever, I would like to setup my text to always use Lucida Console as the font. But I also want to be able to setup a specific class for centering the font, like there is for the image.

Could anyone please help me do this? Thank you very much.

That text element looks invalid. You don't have to put a text element around text, and at least not in this way.

Try this:

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

Then your paragraphs will look like this:

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

By the way, it is unwise to call such a class 'center', because it only says how it looks, not what it means. Instead, try to determine what kind of information is in this centered paragraph (like a 'message', or 'welcome message') and name your class accordingly. That way, the document contains the actual document structure and meta descriptions in the form of classes, while the actual layout is fully specified in CSS. Then, when you want your messages to be italic instead of centered, you can just alter the class in the css file and you're done.

Not sure why you're using but take a look at this example: -

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">