Создание центрированного текстового класса в CSS - PullRequest
Новая
       11

Создание центрированного текстового класса в CSS

0 голосов
/ 09 октября 2011

У меня возникли проблемы с настройкой 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. Но я также хочу иметь возможность настроить определенный класс для центрирования шрифта, как для изображения.

Может ли кто-нибудь помочь мне сделать это? Большое спасибо.

Ответы [ 2 ]

4 голосов
/ 09 октября 2011

Этот элемент 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, и все готово.

0 голосов
/ 09 октября 2011

Не уверен, почему вы используете, но посмотрите на этот пример: -

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