Question

我想将文字置于div的中心位置。我发现这个网站上的代码有效：

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>

但是当我尝试添加类而不是全局div或span时，代码不再起作用了：

.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文件中，导入正常（当我在代码中更改背景颜色时，我可以看到Chrome中的更改）

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

Answer 1

如果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>

Answer 2

您需要在标记中包含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

Answer 3

我认为它可以成为您的解决方案。 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%
}

top：45％必须顶部：总高度（这里是200px） - 跨度高度（只有一个字体大小及其填充物）：

Css代码仅在使用类时不起作用

3 个答案: