متن وسط تگ div

F

freemagic

New Member
سلام
من توی صفحه ای که طراحی کردن از چند تگ div با ابعاد مختلف استفاده کردم. متنی که مستقیما داخل تگ div نوشتم در قسمت بالای اون قرار گرفته در صورتی که میخوام متن در عمود دقیقا وسط div باشه.
با چه دستوری از css میشه این کار رو انجام داد؟
از vertical-align:middle هم استفاده کردم ولی هیچ تغییری نداشت
اگه به جز css هم روشی برای حل اون داشتین ممنون میشم
 
L

L-B

Well-Known Member
یک روش هست که حسین مدیر اینجا تو تاپیک هک های سی اس اس گذاشته :
کد: 
http://forum.majidonline.com/showpost.php?p=478092&postcount=6
ولی خودم استفاده نکردم این روشو ..

من از حالت زیر معمولا استفاده می کنم .. با خاصیت padding :
عکشو اتچ کردم .. اگه منظورتو درست متوجه شدم .. :

کد: 
<!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>
<style type="text/css">
	#center {
		border:1px solid #000;
		width:200px;
		height:200px;
		text-align:center;
		margin:50px 0 0 400px;
		padding:180px 0 0 0;	
	}
</style>
</head>

<body>
<div id="center">MajidOnline : L-B</div>
</body>
</html>
 

پیوست ها

  • a.jpg
    a.jpg
    7.7 کیلوبایت · بازدیدها: 3
F

freemagic

New Member
اون کدی که گفتید مال حسین مدیر هست اصلا متوجه نشدم چه ربطی به مشکل من داشت:-?
به روش دستی به تگ داخلی مختصات دادن طوری که وسط قرار بگیره.
در مورد اینکه منظورم رو درست متوجه شدین یا نه با توجه به این چیزی که قرار دادین درست متوجه شدین ولی مشکل کار اینجاست که این کدها فقط زمانی جواب میدن که متن داخلش همون یک خط باشه. اگه متن طولانی بشه و به چند خط تقسیم بشه اونوقت دیگه وسط صفحه نیست!!!! مگه اینکه دوباره با جاوا اسکریپت کدها تغییر کنن که درست بشه که من نمیخوام در این مورد از جاوا استفاده کنم. میخوام متن خودش به طور پویا در خط عمود وسط قرار بگیره.
واسه این راهی هست؟
 
L

L-B

Well-Known Member
هر خط نوشته مثل زیر ؟
یا هر تگ <p> ?
کد: 
<!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>
<style type="text/css">
	#center {
		border:1px solid #000;
		width:200px;
		height:200px;
		text-align:center;
		margin:50px 0 0 400px;
		padding:140px 0 40px 0;	
	}
</style>
</head>

<body>
<div id="center">MajidOnline : L-B <br /> Text 2 <br /> Text 3 <br /> Text 4 <br /> Text 5 <br /> Text 6</div>
</body>
</html>
 

پیوست ها

  • a.png
    a.png
    4.1 کیلوبایت · بازدیدها: 2
F

freemagic

New Member
الان متن شما درست هست ولی اگه یه <br> بزنم و متن بنویسم دیگه محتویات div وسط نیست و مایل به پایین میشه. میخوام طوری باشه که در هر صورت محتویات وسط باشه. چون بعدا قراره یه عکس هم اونجا به صورت ایکون مربوطه اونجا قرار بگیره
 
F

freemagic

New Member
به این کد یه نگاهی بندازید
کد: 
<div id="sel" style="width:200px; height:200px; background-color:#F09;">
<table style="height:100%; width:auto; font-size:30px; border:none;">
  <tr>
    <td valign="middle"><p><img src="#"></p></td>
    <td valign="middle"><p>test</p></td>
  </tr>
</table>
</div>
این دقیقا همون خروجی رو میده که من میخوام:green:
ولی کد افتضاحی داره! میشه این رو بهینه کرد؟
 
F

freemagic

New Member
echessdesign گفت:
منظور شما مانند این سایت هست؟
کلیک کنید تا باز شود...

توی این صفحه چیز خاصی ندیدم که ببینم منظورم همون بود یا نه!
فقط فرم لاگین هست
ولی یه نگاهی به اون کدی که توی پست قبل گذاشتم بندازید. هم آیکون رو هم متن وسط تگ div نشون داده میشن ولی برای این تراز بندی من از جدول استفاده کردم. یه چیزی میخوام که کمکم کنه جدول رو بردارم. این طوری خیلی کدش ناجور شده!
تقریبا ابعادش هم در همون حد اندازه هست یا باز هم کوچیکتر (اگه منظور شما از مثال سایت این بوده که چه طور اون صفحه کوچیک وسط صفحه بزرگ اومده اره یه همچین چیزی هست ولی نه به این بزرگی)
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا