مشکل این کد html چیست؟ چگونه وسط چین می شود؟

[سیدرضا بازیار]

درود

من یه کد html رو سریع طراحی کردم و دوست دارم بدونم روشی بهتر از این هم واسه نوشتن این کد وجود داره؟ (استاندارد ترین روش چیست؟)

اگه بخواید این کد رو وسط چین کنید از چه روشی استفاده میکنید؟



<div style="text-align:right"><img src="http://seyedrezabazyar.com/istikharah/yes.png" align="right">
<br />
<h1>
عنوان مطلب
</h1>
<br />
<h2>
زیر عنوان
</h2>
</div>


هدف من از پرسیدن این سوال اینه که ببینم استاندارد ترین روش در حال حاضر چیه؟

[SaeedFazlollahzadeh]

اگه بناست وسط چین بشه مقدار text-align رو center کنید (دیگه راست چین یا right نشه و نباشه)
من باشم کد رو به این صورت می نویسم:

<div style="text-align:center"><img src="http://seyedrezabazyar.com/istikharah/yes.png">
<br />
<h1>عنوان مطلب</h1>
<br />
<h2>زیر عنوان</h2>
</div>
http://up.vbiran.ir/uploads/36520150531439712664_l.png

[سیدرضا بازیار]

من میخوام هر دو خط متن در کنار تصویر قرار بگیره (مانند نمایش مطالب یک سایت)

اما از یه طرف به دنبال استاندارد کردن اون هستم

از طرف دیگه با روش های استاندارد نتونستم وسط چینش کنم. البته بدون نیاز به ریسپانسیو کردن

[m2n]

<div style="display:inline-block; float:right;"><img src="http://seyedrezabazyar.com/istikharah/yes.png"></div>
<div style="display:block; float:right; line-height:35px;">
<h1>عنوان مطلب</h1>
<h2>زیر عنوان</h2>
</div>


بجای br از line-height استفاده کنید

- - - Updated - - -

36745

[سیدرضا بازیار]

<div style="display:inline-block; float:right;"><img src="http://seyedrezabazyar.com/istikharah/yes.png"></div>
<div style="display:block; float:right; line-height:35px;">
<h1>عنوان مطلب</h1>
<h2>زیر عنوان</h2>
</div>


بجای br از line-height استفاده کنید

- - - Updated - - -

36745

این روش کد ها بیشتر میشه و یکم پیچیده تر میشه
واقعا این روش استاندارد تر هست؟

[m2n]

این روش کد ها بیشتر میشه و یکم پیچیده تر میشه
واقعا این روش استاندارد تر هست؟

نه ماله شما استاندارد هست نه ماله من.
استایل نباید مستقیم روی تگ تعریف بشه بهترین راه حل و استاندارد بودن تعریف کلاس می باشد یعنی مشا یک عدد کلاس تعریف می کنید هر سه تگ شمارو پوشش میده:


استایل شما:



.my {
display:inline-block;
float:right;
}
.title{
display:block;
float:right;
line-height:35px;
}






کد شما:



<div class="my"><img src="http://seyedrezabazyar.com/istikharah/yes.png"></div>
<div class="title">
<h1>عنوان مطلب</h1>
<h2>زیر عنوان</h2>
</div>




اینم مدل حرفه ای تر دوتای بالا:



.my {
display: inline-block;
overflow: hidden;
float: right;
}

.my img{
display: inline-block;
float: right;
}







<div class="my"> <img src="http://seyedrezabazyar.com/istikharah/yes.png"></div>
<h1>عنوان مطلب</h1>
<h2>زیر عنوان</h2>
</div>

[Shiraz_Host]

با سلام

این روش کاملا درست هستش ولی شما اینجا لینک رو اضافه نکردین!

شما باید فایل css خارجی رو به صفحه مورد نظر لینک بدین که به صورت زیر میشه




<link href="style.css" rel="stylesheet" type="text/css" >




در بهترین حالت این هستش که در تگ head قرار بگیره