td中的CSS-中心元素

时间:2015-06-27 11:21:46

标签: html css html5 css3

我正在尝试建立一个网站。将有一个包含4行和一列的表格,并且会有一个搜索按钮图片,一个文本框,一个门图像和一个div。我有这样的HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Home</title>
<style type="text/css">

#apartman
{
background-color:#993300;
top: 32px;
left: 144px;
height: 75%;
margin-top:10px;
margin-bottom:10px;
text-align:center;
z-index:10;
width:50%;
margin-left:25%;
margin-right:25%;
border:5px solid white;
}
.floor1
{
height: 255px;
font-family:Consolas;
font-size:36px;
color:White;
z-index: 6; 
}
.floor2
{
height: 180px;
border-bottom:5px solid white; 
}
.floor3
{
height: 180px;
border-bottom:5px solid white; 
}
.floor4
{
height: 180px;
border-bottom:5px solid white; 
}
#txtSearch
{
    z-index: 1;
    position: absolute;
    width: 372px;
    height: 28px;
    text-align: left;
    font-family: Consolas;
    font-size: 18px;
    z-index: 8;
    margin-left: 31%;
    margin-right: 12%;
    right: -72px;
    top: 727px;
}
#searchButton
{
    z-index: 1;
    position: absolute;
    height: 28px;
    width: 28px;
    text-align: center;
    left: 672px;
    right: 404px;
    top: 727px;
}
#door
{
    position: absolute;
    height: 226px;
    width: 200px;
    z-index: 7;
    text-align: center;
    left: 407px;
    right: 246px;
    top: 585px;
}
</style> 
</head>
<body style="background-color:#CCCC00">
<table id="apartman">
<tr>
<td class="floor4">
</td>
</tr>
<tr>
<td class="floor3">
</td>
</tr>
<tr>
<td class="floor2">
</td>
</tr>
<tr>
<td class="floor1" > 
This Elements:
<input id="txtSearch" type="text" name="searchValue" value="Search" />
<div style="z-index: 8; left: 294px; top: 662px; position: absolute; height: 42px; width: 382px;">
Home
</div>
<img id="searchButton" src="../../Content/themes/base/images/menu.jpg" />
<img id="door" src="../../Content/themes/base/images/door.jpg"/>
</td>

</tr>
</table>
</body>
</html>

我想用class floor1水平居中td内的元素。我该怎么做?我尝试了一些解决方案,但没有一个有效。

2 个答案:

答案 0 :(得分:2)

你试过这个吗?

.floor1 {
    text-align: center;
}

td {
    text-align: center;
}

答案 1 :(得分:0)

删除图片和Home文本的<div style="z-index: 8;"> Home </div> 似乎有所帮助:

#door
{
height: 226px;
width: 200px;
z-index: 7;
text-align: center;
left: 407px;
right: 246px;
top: 585px;
}

和..

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
{
var cell = tableView.dequeueReusableCellWithIdentifier("RouteCell") as! UITableViewCell

var singleStop = self.stops[indexPath.row]

if(singleStop.stop_name == routeLabelName) // string comparison
{
    cell.highlighted = true
    cell.selected = true

}

cell.textLabel!.text = singleStop.stop_name

cell.imageView!.image = UIImage(named: "ArrowPathMiddle.png")

return cell
}

看看这里:MDN Event.currentTarget reference

相关问题