Question

我在设置一些CSS时遇到了一些麻烦。

这是我的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>

这是我的general.css文件：

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;}

我的图像居中，就像我想要的那样。但是，我想将我的文本设置为始终使用Lucida Console作为字体。但我也希望能够设置一个特定的类来使字体居中，就像图像一样。

有人可以帮我这样做吗？非常感谢你。

Answer 1

text元素看起来无效。您不必在文本周围放置文本元素，至少不以这种方式。

试试这个：

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

然后你的段落将如下所示：

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

顺便说一句，称这样一个班级“中心”是不明智的，因为它只说它的外观，而不是它的含义。相反，尝试确定此居中段落中的信息类型（如“消息”或“欢迎消息”）并相应地命名您的类。这样，文档以类的形式包含实际的文档结构和元描述，而实际的布局在CSS中完全指定。然后，当你希望你的消息是斜体而不是居中时，你可以改变css文件中的类，你就完成了。

Answer 2

不确定您使用的原因，但请看一下这个例子： -

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

在CSS中创建一个居中的文本类

2 个答案: