MontefuckeR
Registered
Как да центрирам текст в див по вертикалата(горе и долу) ?
Центриране на текст в див
- Автор MontefuckeR
- Начална дата
MontefuckeR
Registered
в един див искам да е..emagi каза:
Я пробвай така:
Ма пак е 2-де!незнам, аз пасувам за 1 див 
Код:
<!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="display: table; height: 300px; width: 300px; background: #aaa; _position: relative; overflow: hidden;">
<div style=" _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;">
<p style=" _position: relative; _top: -50%">Това е само проба, за да се види как може да се центрира вертикално текст в див</p>
</div>
</div>
</body>
</html>MontefuckeR
Registered
Лол... явно ще търся в нетаemagi каза:Я пробвай така:
Ма пак е 2-де!незнам, аз пасувам за 1 дивКод:<!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="display: table; height: 300px; width: 300px; background: #aaa; _position: relative; overflow: hidden;"> <div style=" _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;"> <p style=" _position: relative; _top: -50%">Това е само проба, за да се види как може да се центрира вертикално текст в див</p> </div> </div> </body> </html>
html:
<div class="no_image">
<div class="v_center">
<div class="center_ie">
<a href="prod.php?id={$prod.id}" >
<img src="{$prod.thumb|default:'_img/pic_none.gif'}" alt="" />
</a>
</div>
</div>
</div>
CSS:
.no_image { width:65px; height:65px;
text-align:center; float:left;
display:table; vertical-align:middle; }
.v_center { display:table-cell; vertical-align:middle;}
za IE6
* html .no_image { position:relative; overflow:hidden; }
* html .v_center { position:absolute; top:50%; left:50%; }
* html .center_ie { position:relative; top:-50%; left:-50%; }
za IE7
.no_image { position:relative; overflow:hidden; }
.v_center { position:absolute; top:50%; left:50%; }
.center_ie { position:relative; top:-50%; left:-50%; }
Ако искаш да работи навсякаде правиш 2 цсс-а
- в единия двата кода без този за ие7 (това с * е хак само за ие6, слагасе в цсс главния , но се чете само от ие6)
- за ие7 правиш това:
в хтмл-то , тоест това от тоая файл ще се чете само от ие7 и там слага6 цсс кода за ие7
<div class="no_image">
<div class="v_center">
<div class="center_ie">
<a href="prod.php?id={$prod.id}" >
<img src="{$prod.thumb|default:'_img/pic_none.gif'}" alt="" />
</a>
</div>
</div>
</div>
CSS:
.no_image { width:65px; height:65px;
text-align:center; float:left;
display:table; vertical-align:middle; }
.v_center { display:table-cell; vertical-align:middle;}
za IE6
* html .no_image { position:relative; overflow:hidden; }
* html .v_center { position:absolute; top:50%; left:50%; }
* html .center_ie { position:relative; top:-50%; left:-50%; }
za IE7
.no_image { position:relative; overflow:hidden; }
.v_center { position:absolute; top:50%; left:50%; }
.center_ie { position:relative; top:-50%; left:-50%; }
Ако искаш да работи навсякаде правиш 2 цсс-а
- в единия двата кода без този за ие7 (това с * е хак само за ие6, слагасе в цсс главния , но се чете само от ие6)
- за ие7 правиш това:
в хтмл-то , тоест това от тоая файл ще се чете само от ие7 и там слага6 цсс кода за ие7
Код:
<div id="mainDiv" style="background: red; height: 500px;">
<div id="contentDiv" style='text-align: center; position: relative;'>sdfsfdsf</div>
</div>
<script type="text/javascript">
document.getElementById('contentDiv').style.top = ((parseInt(document.getElementById('mainDiv').style.height)-document.getElementById('contentDiv').offsetHeight)/2) +'px';
</script>