مشکل با پوزیشن نوشته ها

jeyson · Jul 19, 2013

با سلام خدمت استادای عزیز!
من دارم یه تم طراحی می کنم برای یه چت روم!
یه مشکلی دارم.
وقتی اسم اتاقا را مینویسم ، و text-align رو center می کنم ، نوشته های من از نظر عرضی میان وسط! اما از نظر طول( ارتفاع) در وسط قرار نمی گیرن و میچسبن به بالای عکس بکگراندشون!
میشه راهتمایی کنید چطوری به صورت horizontal هم در وسط قرارشون بدم؟ :rose:

این هم نمونه کد ها :
[PHPS]
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.rooms{
background-image:url('dark.png');
background-position:right;
width:181px;
padding: 3px 5px 1px 1px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin-bottom: 3px;
margin-right:auto;
margin-left:auto;
margin-top:2px;
height:30px;
color: #fff;
text-align: center;
text-align-last:center;
text-emphasis:center;
cursor

ointer;
}
</style>
</head>
<body>
<p class="rooms"> Room 1 </p>
</body>

</html>

[/PHPS]

و همینطور عکس بکگراند هم اتچ شد :

delhamid · Jul 20, 2013

با سلام

شما باید line-height بهش بدید : مثلاً 20px

روز خوش

jeyson · Jul 20, 2013

ممنونم از کمکتون!
دوست عزیز اینجوری وقتی چندتا روم دارم کلا خراب می شه اسما
می خواستم بدونم چطوری یه تکست رو دقیقا در مرکز بذارم هم طولی و هم عرضی با توجه به اینکه در استایلش بکگراند هم تعریف شده باشه

یعنمی واقعا نمیشه؟!

delhamid · Jul 20, 2013

خب حالا اگر چند تا هست میتونید از padding استفاده کنید

و یکی دیگه از روش ها هم vertical-align هست

معمولاً من خودم توی کد هام از همون line-height استفاده میکنم

موفق باشید

jeyson · Jul 20, 2013

مرسی یه سوال دیگه :
من سه تا لوگو دارم می خوام بیارمش وسط صفحه! به این حالت عمل می کنم اما نمیشه ، چرا؟
[PHPS]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css" >
#test{
margin-left:auto;
margin-right:auto;
letter-spacing:50px;
}
</style>
</head>

<body>
<div id="test">

<img src="img/smile/1.png" width="123" height="134">
<img src="img/smile/2.png" width="157" height="151">

</div>
</body>
</html>
[/PHPS]
این در حالیه که وقتی همین آی دی رو به عناصر دیگه می دم جواب می ده.
در کل می خوام لوگو ها بیان وسط و اگر رزولیشن کاربر فرق داشت یا اینکه کاربر مرورگر رو تغییر اندازه داد بازم لوگو ها بیان وسط! پیشنهادتون چیه؟

delhamid · Jul 20, 2013

برای وسط قرار گرفتن اجزا در HTML سه تا شرط باید رعایت بشه

- اندازه : height & width داشته باشن
- Float نباشن
- margin:0 auto باشه

رعایت کنید مشکلی نیست
روز خوش

jeyson · Jul 20, 2013

اینجوری که گفتین درست شد اما راهی نداره که بتونم top هم براش تعیین کنم؟ چون margin-top که می دم دیگه نمیاد وسط میجسبه به سمت چپ صفحه!!!
با این اوصاف چطوری تعیین کنم از نظر عمودی کجا قرار بگیره؟

jeyson · Jul 20, 2013

بذارین سوال رو بهتر مطرح کنم
فرض کنید یه آبجکت دارید یه پوزیشن بهش میدید! هرجای صفحه که دوست دارین.
نه اینکه فقط وسط باشه!!
حالا چی کار کنیم که کاربر با اینکه سایز مرورگر رو عوض می کنه اما تغییری در پوزیشن آبجکتمون به وجود نیاد! هرچی سایز رو کوچیکتر می کنه ، آبجکت ما هم پوزیشنش عوض شه

delhamid · Jul 20, 2013

مشکلی با margin-top نیست

نسخه ی تغییر یافته این خصوصیت بصورت زیر است.

margin:10px auto 0
اولی تاپ است
وسطی دو طرف است و آخری پائین است
مقدار دهی کنید

طراحی ریسپانسیو را بخوانید
روز خوش