Css代碼只在使用類時才起作用

我想將文本置於div中。我發現在這個網站，工程驗證碼：Css代碼只在使用類時才起作用

div { 
    width: 250px; 
    height: 100px; 
    line-height: 100px; 
    text-align: center; 
} 

span { 
    display: inline-block; 
    vertical-align: middle; 
    line-height: normal;  
} 

<div> 
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> 
</div>

但是當我嘗試添加類，而不是全球股利或跨度，代碼不工作了：

.titleDiv { 
    width: 250px; 
    height: 100px; 
    line-height: 100px; 
    text-align: center; 
} 

.titleSpan { 
    display: inline-block; 
    vertical-align: middle; 
    line-height: normal;  
} 

<div class="titleDiv"> 
     <span class="titleSpan"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     </span> 
</div>

任何想法，爲什麼它不行？我正在使用VS2010 Pro。

編輯：

CSS代碼是在被導入確定一個單獨的CSS文件（當我改變代碼中的背景顏色，然後我可以看到在鉻的變化）

編輯2：

下面是完整的標記：

Default.aspx文件：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

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

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body class="titleDiv"> 
    <form id="form1" runat="server"> 
    <div class="titleDiv"> 
     <span class="titleSpan">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> 
    </div> 
    </form> 
</body> 
</html>

個stylesheet.css中的文件：

.titleDiv { 
    width: 250px; 
    height: 100px; 
    line-height: 100px; 
    text-align: center; 
} 

.titleSpan { 
    display: inline-block; 
    vertical-align: middle; 
    line-height: normal;  
}

來源

2014-01-13 kovacs lorand

您能澄清一下「不起作用」的含義嗎？ –

它似乎爲我工作：http://jsfiddle.net/5jrVh/ – webdad3

是的，在jsfiddle它的作品，與視覺工作室不起作用 –

如果CSS是在同一文件中使用<style> </style>標籤：

<style type="text/css">  
    .titleDiv { 
     width: 250px; 
     height: 100px; 
     line-height: 100px; 
     text-align: center; 
    } 
    .titleSpan { 
     display: inline-block; 
     vertical-align: middle; 
     line-height: normal; 
    } 
</style>

什麼會產生從100px的差距：

<body> 
<form id="form1" runat="server"> 
    <div class="titleDiv"></div> <%--The gap--%> 
    <div class="titleDiv"> 
     <span class="titleSpan">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> 
    </div> 
</form>

來源

2014-01-13 17:55:56 Jim

我有單獨的css文件，導入正常（當我改變，然後在代碼中的背景顏色，我可以看到在Chrome中的變化） –

你需要在標籤中放置你的CSS，例如

<style> 
.titleDiv { 
    width: 250px; 
    height: 100px; 
    line-height: 100px; 
    ext-align: center; 
} 

.titleSpan { 
    display: inline-block; 
    vertical-align: middle; 
    ine-height: normal;  
} 
</style> 
<div> 
content 
</div

來源

2014-01-13 17:56:13 Matt

我有單獨的css文件導入正常（當我改變代碼的背景顏色，我可以請參閱Chrome中的更改） –

我認爲它可以成爲您的解決方案。 Here 是鏈接

HTML

<body>  
    <div class="titleDiv"> 
     <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> 
    </div> 
</body> 
</html>

CSS

.titleDiv {  
    background-color:red; 
    text-align:center; 
    margin-left:auto; 
    margin-right:auto; 
    width:500px; 
    height:200px; 
} 

.titleDiv span{ 
    background-color:aqua; 
    position:relative; 
    top:45% 
}

頂部：45％必須是頂部：總高（這是爲200px這裏） - SPAN高度（這只是字體大小及其填充）：

來源

2014-01-13 19:15:53

Css代碼只在使用類時才起作用

回答

相關問題