CSS-элементы центра внутри td

Я пытаюсь создать сайт. Будет таблица с 4 строками и столбцом, и будет изображение кнопки поиска, текстовое поле, изображение двери и div. У меня есть HTML-код:CSS-элементы центра внутри td

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

Я хочу, чтобы элементы горизонтального центра внутри td с классом floor1. Как мне это сделать? Я пробовал некоторые решения, но никто из них не работал.

источник

2015-06-27 Ömer Keskin

Вы должны использовать '

' для табличных данных, а не для макетов. Посмотрите на grid-layouts как лучшее решение. Решение, которое будет работать @ raj454raj. На боковой ноте вы можете использовать '' для полей поиска. –

Assalamu alikoom, Можете ли вы представить дизайн изображения того, что вы хотите? –

ответ

Вы пробовали это?

.floor1 { 
    text-align: center; 
}

или

td { 
    text-align: center; 
}

источник

2015-06-27 11:26:31 raj454raj

Удаление position: absolute; как для изображения и домашнего текста, кажется, помогает:

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

И ..

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

Посмотрите здесь : http://jsfiddle.net/c88k8mp1/

источник

2015-06-27 11:48:04 Tarun

CSS-элементы центра внутри td

ответ

Смежные вопросы