CODEWITHSUNDEEP
htmlcss
Ömer Keskin
Ömer Keskin

Reputation: 49

CSS- Center elements inside td

I'm trying to make a website. There will be a table with 4 rows and a column, and there will be a search button picture, a textbox, a door image and a div. I have HTML like this: 

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

I want to horizontally center elements inside td with class floor1. How can I do it? I've tried some solutions but none of them worked.

Upvotes: 1

Views: 3083

Answers (2)

raj454raj
raj454raj

Reputation: 298

Did you try this?

.floor1 {
    text-align: center;
}

or

td {
    text-align: center;
}

Upvotes: 2

Tarun
Tarun

Reputation: 641

Removing position: absolute; for both the image and the Home text seems to help:

<div style="z-index: 8;">
Home
</div>

And..

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

Have a look here: http://jsfiddle.net/c88k8mp1/

Upvotes: 0

Related Questions