Центриране на текст в див

N

Nikol4u

Registered
Код: 
		<div style="text-align: center;">
			<style type="text/css">
			
			</style>
			<table border="0" width="357" height="15">
				<tbody>
					<tr>
						<td style="border: 1px solid rgb(0, 0, 0); padding: 0pt; text-align: left;"><div class="diagram" style="width: 219px; text-align: center;"><div style="text-align: center;">61%</div></div></td>

					</tr>
				</tbody>
			</table>
		</div>

Целта ми е 61% да е посредата на ТАБЛИЦАТА, а не на див-а. Пробвах много варианти, това е от последният път.
 
Така ли ?

Код: 
       <div style="text-align: center;">
         <style type="text/css">
         
         </style>
         <table border="0" width="357" height="15">
            <tbody>
               <tr>
                  <td style="border: 1px solid rgb(0, 0, 0); padding: 0pt; text-align: right;"><div class="diagram" style="width: 219px;"><div style="text-align: right;">61%</div></div></td>

               </tr>
            </tbody>
         </table>
      </div>
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="text-align: center;">
<style type="text/css">

</style>
<table border="0" width="357" height="15">
<tbody>
<tr>
<td style="border: 1px solid rgb(0, 0, 0); padding: 0pt;" align="center"><div class="diagram" style="width: 219px;">61%</div></td>

</tr>
</tbody>
</table>
</div>
</body>
</html>
Увеличете...
 
emagi каза:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="text-align: center;">
<style type="text/css">

</style>
<table border="0" width="357" height="15">
<tbody>
<tr>
<td style="border: 1px solid rgb(0, 0, 0); padding: 0pt;" align="center"><div class="diagram" style="width: 219px;">61%</div></td>

</tr>
</tbody>
</table>
</div>
</body>
</html>
Увеличете...
Увеличете...

Да ама сега зеленото е центрирано, а искам то да почва отляво ^^
 
Я пробвай сега:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="text-align: center;">
<style type="text/css">
.diagram {
background-color: #99FF33;
color: #000000;
height: 100%;
font: 13px tahoma, arial, verdana, helvetica, sans-serif;
font-weight: bold;
text-align:left;
}
</style>
<table border="0" width="357" height="15">
<tbody>
<tr>
<td style="border: 1px solid rgb(0, 0, 0); padding: 0pt; text-align:center; height:20px;"><div class="diagram" style="width: 219px; float:left"> </div><span style="position:relative; left:-105px;">61%</span></td>

</tr>
</tbody>
</table>
</div>
</body>
</html>
Увеличете...
И няма проблеми при различните резолюции
 
Ето и моето решение на проблема. Вярно трябва да се ползва картинка, но поне е сигурно, че няма да се размества :)

<style type="text/css">
.diagram {
background: url(back.jpg); //Картинката за фон (зелен цвят) нужно е единствено да е 1px висока и колкото искаш широка
background-repeat: repeat-y; //Повтаряме картинката вертикално
background-attachment:fixed; //Фиксираме я

color: #000000;
height: 100%;
font: 13px tahoma, arial, verdana, helvetica, sans-serif;
font-weight: bold;
text-align: center;
}

</style>
<div style="text-align: center;">
<table border="0" width="357" height="15">
<tbody>
<tr>
<td style="border: 1px solid #000000; padding: 0pt;"><div class="diagram">69%</div></td>

</tr>
</tbody>
</table>
</div>
Увеличете...
 
@adrian,
няма и не се получат размества поради факта, че става дума за относително отметване вътре в самата клетка на таблицата.Щом клетката е на "правилното място", текста в случая:
61%
Увеличете...
винаги ще е на -110px от мястото, където би трябвало да бъде :)
Не казвам, че е най-удачният вариант, но работи.ДАже бях сигурен, но заради теб пробвах и нямаше проблем!:)
 
Благодаря за предложенията.

@adrian ще има смяна на цвета, затова искам да е с ЦСС

@emagi твоя вариант е удачен, но тези width на div-a = % * 3, тоест на различни от 60% процента, става разместване. Незнаех, че ще е нужно да го напиша това, понеже си мислих, че ще има някакъв друг вид центриране.

Няма ли начин процентите да бъдат на 178-179px от левия бордер и да са в/у зеленото?

Пример: http://eusunt.data.bg/test.html
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="text-align: center;">
<style type="text/css">
.diagram {
background-color: #99FF33;
color: #000000;
height: 100%;
font: 13px tahoma, arial, verdana, helvetica, sans-serif;
font-weight: bold;
text-align:left;
}
</style>
<table border="0" width="357" height="15">
<tbody>
<tr>
<td style="border: 1px solid rgb(0, 0, 0); padding: 0pt; text-align:center; height:20px;"><div class="diagram" style="width: 219px; float:left"><span style="margin-left:170px;">61%</span></div></td>

</tr>
</tbody>
</table>
</div>
</body>
</html>
Увеличете...
Я виж сега!Сега наместих 61% на 170 px от лявата страна , а ти си намести както искаш
 
emagi, пробвах го и затова си промених поста :) Наистина няма разместване.

Просто не мисля, че е удачно да се работи с отрицателни стойности на position.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе