متن وسط تگ div [بایگانی]

FreeMagic

جمعه 06 آبان 1390, 12:22 عصر

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

F.zeinali

جمعه 06 آبان 1390, 15:40 عصر

سلام
<body>
<div>
<p>farshad zeinali</p>
</div>

</body>

div
{
width:300px;
height:300px;
background-color:Yellow;
position:relative;
}
p
{
position:absolute;
top:150px;
left:120px;
}

FreeMagic

جمعه 06 آبان 1390, 18:48 عصر

این که تگ div یه گوشه میفته و پاراگرف هم یه گوشه دیگه:متفکر:
فرض کنید ارتفاع تک div حدود 500 پیکسل هست. و متن داخلش هم اصلا معلوم نیست چند کلمه و یا چند خط هست!!! حالا میخوام خودش متن مورد نظر رو در محور عمودی وسط قرار بده. دقیقا طبق حالت پیش فرض سلول های جدول. وقتی ارتفاع سلول ها زیاد باشه وقتی متنی می نویسید در وسط قرار میگیره

ebrazi2

شنبه 07 آبان 1390, 10:56 صبح

aliyeh

شنبه 07 آبان 1390, 12:24 عصر

خوب اینطوریکه div داخلی به بالای div بیرونی می چسبه و باز هم مشکل سر جاش باقیه
نمیشه یه جورایی از padding استفاده کرد؟

FreeMagic

یک شنبه 08 آبان 1390, 13:55 عصر

من فکر کنم يه جاي کار اشتباهي صورت گرفته وگرنه اون کد بايد کار کنه. پيشنهاد ميکنم به ديو موردنظر بک گراند و طول و عرض بديد و چک کنيد. گاهي وقتها يه مشکلاتي وجود داره که اينطوري با چک کردن بهش پي مي بريد. يه کار ديگه هم ميشه در نهايت کرد، ميشه يه ديو داخل ديو بيروني گذاشت و به ديو بيرون text-align:center داد که ديو داخلي دقيقا وسط بيفته اما به ديو داخلي طول و عرض نداد تا دقيقا اندازه ي متن بشه. اينطوري ميشه به سي اس اس کلک زد.
:متفکر: این طوری که به قول دوستمون باز div داخلی میچسبه به بالای div خارجی!!! پس بازم مشکل حل نشده.
یک راه هست و اون هم اینه که توی هر Div یک جدول 1*1 درست کرد:لبخند: اونوقت متن خودش هم در سطر و هم در عمود درست میشه ولی کدش خیلی افتضاح میشه:ناراحت:
تا الان هر کدی رو دیدم طوری بودن که فقط با یک متن خاص (مثلا متن 1 خطی) جواب بدن ولی اگه ندونیم متن اصلا چند خط هست دیگه هیچ کاریش نمیشه کرد

FreeMagic

یک شنبه 08 آبان 1390, 21:15 عصر

الان یه نگاهی به کد زیر بندازید

<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>
این دقیقا همون خروجی رو میده که من میخوام:لبخند:
ولی کدش خیلی افتضاحه! چه طور میشه بهینه ترش کرد؟

ebrazi2

دوشنبه 30 آبان 1390, 11:33 صبح

با سلام، من رفتم توي اينترنت گشتم و يه چيزي پيدا کردم که خروجي مورد دلخواه شمارو ميده توي يه فايل ذخيره کردم نمونه را ميتونيد دانلودش کنيد. اما فقط يکي از خط ها را خودم نميفهمم چطوري گذاشته. يعني نميدونم چرا براي ديو داخلي مارجين گذاشته و عددهاشو از کجا آورده. اگه کسي فهميد به ما هم بگويد.78183

ravand

دوشنبه 30 آبان 1390, 13:56 عصر

سلام
سعي كنيد هر طوري كد نويسي ميكنيد بعدا ببينيد با ديگر مرورگر ها هم اين كدهاي شما سازگار هست يا نه.
برخي از اين مقاديري كه به position داده ميشه با برخي مرورگر ها مشكل داره من يه روش راحت تر دارم.

<html>
<head>

<style type="text/css">
.onvan{
height:295px;
width:775px;
border: 2px solid #999;
padding-top:100px;
}
</style>
</head>
<body>
<div class="onvan">
<div align="center">
<h2>matn</h2>
</div>
</div>
</body>
</html>

شايد اگه يه div ديگه داخل همين div بسازي بهتر باشه مثل كد زير:

<html>
<head>

<style type="text/css">
.onvan{
height:295px;
width:775px;
border: 2px solid #999;
}

.matnonvan{

direction:rtl;
text-align:center;
color:green;
font-family:tahoma;
font-size:12pt;
padding-top:100px;
border: 0px solid #999;
}
</style>
</head>
<body>

<div class="onvan">
<div class="matnonvan" align="center">
<h2>matn</h2>
</div>
</div>
</body>
</html>

Saber Mogaddas

دوشنبه 30 آبان 1390, 16:28 عصر

سلام
به نظر من برایه اینکه شما حجم دستوراتتون کم باشه از این فرمول استفاده کنید..
height دیو اصلی که متن در اون جای میگیره منهای height دیو متن بکنید..و حاصل رو تقسیم بر 2 کنید..و جواب رو بصورت margin-top به دیو متن بدید.. و همچنین به دیو متن margin:auto; بدید ..مثل مثال پایین..

<html>
<head>
<title>www.pars-click.com</title>
<style type="text/css">
.Div1{
height:300px;
width:400px;
border: 2px solid #000;
margin:auto;
}

#Txt
{
direction:rtl;
text-align:center;
width:300px;
height:30px;
margin:auto;
margin-top:135px;
}
</style>
</head>
<body>

<div class="Div1">
<div id="Txt">متن مورد نظر شما</div>
</div>
</body>
</html>

موفق باشی..

nama62

دوشنبه 30 آبان 1390, 22:00 عصر

سلام.

من در CSS کم تجربه ام و تازه کار.

اما اگر منظورتو درست متوجه شده باشم باید بگم که:

اگر میخوای محتوای متنی یک المان بلاک، دقیقاً وسط المان قرار بگیره (از نظر عمودی) باید از خاصیت line-height در CSS استفاده کنی.

مثلا اگر div مورد نظرت ارتفاعش 50px هستش، بهش خاصیت line-height: 50px رو هم بده.

دقت داشته باش که ارتفاع المان مورد نظر هرچقدر هست، باید line-height رو هم دقیقاً همون قدر بدی.

در این صورت، متن مورد نظرت دقیقا وسط div قرار میگیره؛ البته اط نظر ارتفاع.

Saber Mogaddas

سه شنبه 01 آذر 1390, 11:12 صبح

line-height کارش اینه که بین دو سطر فاصله بندازه و تو پاراگراف ها و list ها به کار میره..