وسط قرار دادن عناصر در طراحی صفحات وب یکی از موارد رایج می باشد. در این مطلب قصد داریم تقریبا همه شرایطی که برای وسط قرار دادن عناصر بوجود می آیند را بررسی کنیم. این نوشته ترکیبی از مطلب عالی در سایت css-tricks.com و تجربه بنده است. چون موضوع از اهمیت زیادی برخوردار است از هرگونه سوال, نظر, پیشنهاد و انتقاد که به دوستان عزیز کمک کند به شدت استقبال می شود.
در ضمن اگر فرق عنصر بلاک و خطی را نمی دانید بهتر است اول این مطلب را بخوانید.
افقی
عنصر از نوع inline و یا از خانواده های inline است؟
عناصری مثل متن و لینک و یا دکمه ها بصورت پیشفرض از این نوع هستند. وقتی آنها درون یک عنصر از نوع بلاک (مثل <div> ) قرار می گیرند کافی است به عنصر پدر (یعنی همان عنصر بلاک) ویژگی و مقدار زیر را بدهیم. ( دعا کنید هیچ عنصری بی پدر نشه :) )
div.dad {
text-align: center;
}
لطفا دموی زیر را بررسی کنید:
See the Pen Centering inline-* elements horizontally by Mojtaba Seyedi (@seyedi) on CodePen.
این روش برای عناصر inline, inline-block, inline-table, inline-flex هم بخوبی جواب می دهد.
عنصر از نوع block است؟
اگر عنصری که قرار است وسط قرار بگیرد از نوع بلاک است کافی است به ویژگی margin-left و margin-right آن مقدار auto بدهید. (البته عنصر باید عرض داشته باشد. که البته اگر عرض نداشته باشد از آنجایی که بلاک است کل عرض عنصر پدرش را می گیرد پس نیازی به وسط چین کردن آن نیست.)
نکته مهم اینکه عنصری که دارای ویژگی float هست را نمی توانید به این روش در وسط قرار دهید.
div.man-mikham-biam-vasat {
width: 200px; /* عرض دلخواه */
margin-left: auto;
margin-right: auto;
}
لطفا دموی زیر را بررسی کنید:
See the Pen Centering block elements horizontally by Mojtaba Seyedi (@seyedi) on CodePen.
عنصر از نوع بلاک است ولی عرض مشخص ندارد؟
در خیلی از مواقع پیش می آید که می خواهیم عنصر عرض محتوای داخل خود را بگیرد (یعنی عرض کمینه) و در وسط هم قرار بگیرد. آن عنصر می تواند یک بلاک با محتوای متن باشد و یا می تواند یک منو با محتوای آیتم های داخل آن باشد. که این مورد خیلی رایج است. فقط کافی است به آن عنصر ویژگی ها و مقادیر زیر را بدهید: ( این موضوع در این مطلب همراه با چند ترفند کاربردی دیگر کاملا بررسی شده است. )
.element {
display: table;
margin-left: auto;
margin-right: auto;
}
See the Pen Centering block elements horizontally by Mojtaba Seyedi (@seyedi) on CodePen.
بیشتر از یک عنصر بلاک وجود دارد؟
اگر چند عنصر دارید که از نوع بلاک هستند و در کنار هم قرار گرفتند و می خواهید همگی در کنار هم و در وسط صفحه قرار بگیرند. حداقل دو راه حل برای این کار وجود دارد. اول اینکه ویژگی display آنها را inline-block کنید و به عنصر پدرشان text-align: center; بدهید.
(یعنی همان روش اولی که بررسی شد)
See the Pen Centering blocks elements horizontally by Mojtaba Seyedi (@seyedi) on CodePen.
همینطور می توانید از روش فلکس باکس استفاده کنید. یعنی کافی است ویژگی ها و مقادیر زیر را به عنصر پدر این عنصرها بدهید:
.dad-flex-center {
display: flex;
justify-content: center;
}
دموی زیر را در همین رابطه بررسی کنید:
See the Pen Centering blocks elements horizontally by Mojtaba Seyedi (@seyedi) on CodePen.
عمودی
عنصر از نوع inline و یا از خانواده های inline است؟
تک خط است؟
گاهی فقط استفاده از یک padding بالا و پایین جواب شما خواهد بود:
.element {
padding-top: 30px;
padding-bottom: 30px;
}
See the Pen Centering singleline inline elements vertically by Mojtaba Seyedi (@seyedi) on CodePen.
اما اگر این روش مناسب شما نیست یک ترفند هم وجود دارد و آن هم برابر قرار دادن line-height و ارتفاع عنصر است:
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
See the Pen Centering singleline inline elements vertically by Mojtaba Seyedi (@seyedi) on CodePen.
بیشتر از یک خط است؟
زمانی که با یک عنصر چند خطی رو برو هستیم گاهی همان روش padding بالا و پایین کافی خواهد بود.
اما می توان از تکنیک جدول ها و ویژگی vertical-align هم در شرایط خودش استفاده کرد:
See the Pen Centering multi-line inline elements vertically by Mojtaba Seyedi (@seyedi) on CodePen.
راه بعدی استفاده از Flexbox است, البته باید توجه داشته باشید که عنصر پدر باید ارتفاع مشخص داشته باشد و کافی است به عنصر پدر این ویژگی ها تعلق بگیرند:
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
دموی زیر این روش را به نمایش می گذارد:
See the Pen Centering multi-line inline elements vertically by Mojtaba Seyedi (@seyedi) on CodePen.
اگر بنا به پروژه نمی توانید از فلکس باکس استفاده کنید هنوز یک راه دیگر هم وجود دارد و آن تکنیک عنصر روح نام دارد. برای درک این روش باید با before در سی اس اس آشنا باشید. البته این تکنیک خیلی پویا و انعطاف پذیر نیست ولی دانستن آن ضرری ندارد.
See the Pen Centering multi-line inline elements vertically by Mojtaba Seyedi (@seyedi) on CodePen.
عنصر از نوع بلاک است؟
ارتفاع عنصر مشخص است؟
معمولا ارتفاع عناصر به دلیل اینکه بهترین رویه این است که اجازه بدهیم تا محتوا ارتفاع را مشخص کند, نامعلوم است. این امر باعث می شود تا در مواردی که عرض تغییر می کند محتوا از عنصر خارج نشود. اما اگر در شرایطی بودید که ارتفاع عنصر مشخص بود می توانید از روش زیر استفاده کنید:
.parent {
position: relative;
}
.child {
position: absolute;
height: 100px;
top: 0%;
bottom: 0%;
margin-top: auto;
margin-bottom: auto;
}
توجه داشته باشید که در مثال بالا اگر برای عنصر فرزند از border-box استفاده نمی کنید باید مقادیر border و padding در راستای عمود هم به مقدار margin-top اضافه شود.
See the Pen Centering block-know-height elements vertically by Mojtaba Seyedi (@seyedi) on CodePen.
ارتفاع عنصر نامعلوم است؟
در این روش عنصر فرزند را بوسیله ویژگی top به اندازه نصف ارتفاع پدر پایین می آوریم, حال کافی است تا به اندازه نصف ارتفاع خود عنصر به بالا برگردیم که این کار را با استفاده از ویژگی transform انجام می دهیم:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
گفته شده که در برخی از مرورگرها این تکنیک باعث می شود تا عنصر بطور صحیح ترسیم نشود, برای رفع این مشکل در آن معدود مرورگرها, کافی است تا ویژگی زیر را به عنصر پدر بدهیم:
.parent-element {
transform-style: preserve-3d;
}
پیشوند گذاری برای مرورگرهای قدیمی فراموش نشود!
See the Pen Centering block-unknow-height elements vertically by Mojtaba Seyedi (@seyedi) on CodePen.
می توانید از فلکس باکس استفاده کنید؟
با استفاده از فلکس باکس خیلی کار راحت می شود کافی است به عنصر پدر ویژگی و مقادیر زیر را بدهیم:
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
See the Pen Centering block elements vertically by Mojtaba Seyedi (@seyedi) on CodePen.
افقی و عمودی
با ترکیب روش های بالا می توانید به نتیجه مطلوب برای وسط قرار دادن عنصر برسید. ما در اینجا سه حالت را بررسی می کنیم:
عرض و ارتفاع ثابت هستند؟
در این روش کافی است به عنصر مورد نظر و پدر آن ویژگی های زیر تعلق بگیرد:
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
عرض و ارتفاع مشخص نیست؟
در این روش کافی است به عنصر مورد نظر و پدر آن ویژگی های زیر را بدهید:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* و یا */
/*
.child {
position: absolute;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
}
*/
می توانید از فلکس باکس استفاده کنید؟
کافی است تا از دو ویژگی وسط ساز فلکس باکس برای عنصر پدر (عنصر نگهدارنده) استفاده کنید:
.parent {
display: flex;
justify-content: center;
align-items: center;
}
نتیجه اخلاقی
وسط آوردن عناصر در سی اس اس کاملا شدنی است :)
همچنین ابزار زیر می تواند برای فهم این نکات مفید باشد:
خیلی خوب و مفید مینویسید.
واقعا ممنونم.
خواهش میکنم نظر لطفتونه.
besiar alyy bod
لطفا در مورد css grid هم مطلب بگذارید .
حتما. من خودم هم خیلی مشتاقم تا در موردش بنویسم. به امید خدا در اولین فرصت.
مجتبی جان،
بنده یه مشکلی دارم، اونم این که نمیدونم که عرض و ارتفاع عنصرم رو می دونم یا نمی دونم که بخام از کدوم یک از روش های ذکر شده استفاده کنم؟
مثلا واسه درصد ها، یا عناصری که با عناصر داخلی شون اندازه می گیرند، یا غیره.
اگه لازم بود اشاره کن تا مثال های بیشتر و مشخص تری بیارم.
مرسی.
احسان جان یک مثال توی jsbin.com درست کن و آدرسشو اینجا بزار تا بررسی کنیم با هم. ممنون
اگه با کروم کار میکنی میتونی با ترکیب کلید های کنترل + شیفت + i وارد حالت ابزار گسترش(Developer Tools) بشی و با استفاده از ترکیب کنترل + شیفت + C(یا کلیک کردن روی نشانه ی موس در بالا سمت چپ) و بردن نشان گر موست روی عنصر مورد نظر ویژگی های اون مثل اندازه و رنگ و …. ببینی.
برای مثال:
https://jsbin.com/rakume/ed…
لطفا مشخص کن این ul چه ارتفاعی داره؟ و چطور میاد وسط عمودی؟
و این رو هم فرض کن که ممکنه حتی li ها هم عرض مشخص نداشته باشند و مثلا یه فایل عکس با ارتفاع نا معلوم درونشون قرار داده بشه.
امیدوارم رسونده باشم مساله رو.
مرسی.
اینو بررسی کنید:
http://jsbin.com/refaco/edi…
در ضمن روش clearfix ای که استفاده کرده بودید قدیمیه. عوضش کردم. مرسی واسه سوال خوبت احسان جان. من از ترکیب دو تا از روشهای توضیح داده شده توی مقاله استفاده کردم.
درخصوص clearfix، بله حق با شماست، چون موضوع موردنظرم نبود صرف راه افتادن قضیه نوشته بودم. چراکه حتی روش استفاده از شبه عناصر هم مشکلاتی، از همون جنس رو، داره. البته خودت خیلی بهتر میدونی.
در مورد مساله، پس به عبارتی به عنوان یه block element که ارتفاع نامعلومی داره ، باهاش برخورد کردی. درسته؟
یعنی ظاهرا ما با دونستن عرض li ها میدونیم عرض ul چیه(ظاهرا)، ولی طوری برخورد باید بکنیم که انگار نمیدونیم.
بازهم مسائلی در همین مورد، از انواع دیگه، دارم اما همونطور که فکرش رو میکردم گویا درک کامل این مبحث، نیاز به تجربه بیشتر و دانش عمیق تری داره.
لذا بنده فعلا هستم در خدمتتون :)
مرسی مجتبی جان.
از لحاظ عمودی که واضحه چه اتفاقی افتاده. ولی از لحاظ افقی:
همیشه display:table باعث میشه تا عنصر حداقل عرض رو به خودش بگیره, یعنی همون عرض محتوا حالا اون محتوا میخواد هر چی باشه. توی این مثال, می خواد یه li باشه یا 10 تا. liها عرض داشته باشند یا نداشته باشند. فرقی نمیکنه. ul عرض محتواش رو می گیره.
مشکل clearfix با after چیه؟ من نمی دونم.
آقا من میخوام با فلکس باکس، یه دایو رو وسط(افقی و عمودی) بادی قرار بدم ولی نمیشه! چرا؟
یه سوال دیگه: به body ارتفاع 100% میدم و انتظار دارم وقتی به دابو ـم ارتفاع 100% میدم به اندازه کل بادی کش بیاد ولی نمیشه چرا؟
البته من فقط اینجا دارم موردی برخورد می کنم:
سوال اول: http://jsbin.com/jihuwik/ed…
سوال دوم: http://jsbin.com/fexete/edi…
ممنون
html رو حساب نمیکردم
قبلا از disqus استفاده میکردین، الان برای من ایمیل نشد پاسختون. من منتظر ایمیل بودم
آره اون فیلتر شد متاسفانه.
بسیار عالیییی…خیلی باحال بوداستادگرامی.
قربونت رضا جان. خیلی مخلصیم رفیق :)
سلام وقت بخیر
یکی دیگه از راه های وسط آوردن لایه هم اینه:
parent{
display: table;
}
parent children{
display: table-cells;
}
سلام خیلی ممنون…
فقط باید این رو هم داشته باشیم: vertical-align: middle
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
سلام خدایی آموزش عالی بود. خیلی به کارم اومد.ممنون
خیلی آموزش توپی بود
کلاً وسط آوردن با css خیلی دردسر داره. شما خیلی عالی همه موارد رو توضیح دادین
موفق و پیروز باشید
دمت گرم سایت زیبایی داری
سلام وققتون بخیر،
من میخام ویدئوهامو تو وبلاگ وسط کادر بیارم، چه جوری باید اینکارو انجام بدم؟؟؟
خیلی خوب و مفید بود
دستتون طلا
فوج فوج قرارداد بیاد براتون
خیلی کارت درسته آقا مجتبی
کیف کردم… هم با این مطلب هم با کل سایتت هم با خودت
حتی جمله هایی هم که داخل مثالهات میاری قشنگ و خوندنیَن
از این به بعد برای یاد گرفتن و حل هر مشکل css میام اینجا
موفق باشی
وااای فوق العاده توضیح میدین خیلی ممنون.راجع به ساخت منوی ریسپانسیو هم گفتین؟
منوی ریسپانسیو یک چیزی نیست که بشه توی یک مطلب آموزشش داد. باید فرد به یک سری مطالب تسلط داشته باشه و بعد از اون می تونه هر منویی رو پیاده سازی کنه. برای تلسط به اون موضوع ها ما کارگاه صفحه آرایی رو طراحی کردیم. که می تونید استفاده کنید.
سلام. من با اموزشای شما همه نقاط تاریک ذنم باز میشه. اول کاری خوشبحالمه شما رو پیدا کردم:)
الان به شدت به رسپانسیو کردن نیاز دارم. میشه راهنماییم کنید. یه لینک از سایتتون یا جای دیگه
سلام، خوشحالم مطالب مفید بوده.
دوره‌های صفحه آرایی واکنشگرا و بعد از اون فلکس باکس این مورد رو پوشش میدن.
موفق باشید
الان دوباره داشتم این پست رو میخوندم.مگهjustify-content از نظز افقی تراز بندی نمیکرد؟پس چرا برای وسط قرار دادن عمودی استفاده شده؟
اگر flex-direction مقدارش column بشه همه چی برعکس میشه دیگه.
چرا از همون روش عادی یعنی align-items استفاده نکنیم؟
در شرایط مختلف روش های مختلف به کار میان.
درود
در یک کلمه فقط میتونم بگم بهترینید.
مشکل همیشگی منو حل کردین :)
یاحق
آقا توضيحاتتون خيلي كامل و دقيق است
واقعا ممنون از شما
سلام علیکم
بابا دمت گرم ، طریقه آموزشت خیلی خوبه حتما چیز جدید گذاشتی از طریق خبر نامه خبر بده دنبال کنم{ایمیلم درج شده}
چرا برای دادن یه نظر باید بیام ته صفحه ؟
position: relative;
top: 50%;
transform: translateY(-50%);
سلام.وقت بخیر..گفتین این پروپرتیارو بدیم به عنصر..درست میشن ولی در سایزهای دیگه میرن پایینتر..من میخوام داخل هر سایز وسط قرار بگیره..چه عنصر و چه متن داخل یه عنصر..چی کار باید بکنم؟
سلام. یک دمو توی سایت codepen.io یا jsbin.com بسازید، لینکش رو بزارید اینجا تا بررسی کنیم. اینطوری مشکل فهمیده نمیشه.
سلام خسته نباشی استاد
من یک لودر برای نمایش swf تو برنامه ام قرار دادم وقتی برنامه فول اسکرین میشه لودر در وسط قرار نمیگیره و در مانیتورهای متفاوت جاهای متفاوت قرار میگیره لطفا کمکم کن
اقا مجتبی عزیز واقعا ممنونم
مطالب عالی و مفید هستند
امیرالمومنین نگدارت باشه
عالی بود مطالب، بدجوری گیر کرده بودم که با کمک شما بالاخره جواب گرفتم.
سلام.
جدیدا به یه مشکلی بر خوردم کلی گشتم تا سایت خوب شما رو پیدا کردم.
فرض کنید یه باکس داریم که یه متن رو وسطش قرار دادیم.
حالا اگه بخوایم کنار اون متن یک SVG قرار بدیم با فاصله مشخص و متن از جاش تکون نخوره چکارش باید کرد؟
میخوام اگه متن تغییر هم کرد، باز هم SVG با همون فاصله که تعریف کردم کنار متن باشه.
ممنون میشم راهنماییم کنید.
باید اون متن و svg برن توی یک باکس که اون باکس position از نوع relative داشته باشه. حالا Svg هم باید absolute بشه و مختصات بگیره: یه چیزی مثل این:
http://jsbin.com/tuyavor/edit?html,css,output
خیلی خیلی ممنونم از شما.
بی نهایت ممنون از آموزش خیلی خوب و اصولی شما
بسیار کارا و عالی توضیح دادید و راحت میشه درکش کرد.
آموزش عالی وکامل بود .کارم روراه انداخت . خدا به شما خیر بده .
سلام و خسته نباشید..
ممنون از توضیحات و آمزش های مفید تون.. من دارم روی یک قال فروشگاهی کار میکنم فقط تو یک موردئ موندم.. از هر راهی رفتم نشد که نشد..
من میخوام ستاره های امتیاز وسط بلوک قرار بگیر بگیر ولی هر کاری میکنم نمیشه !
خواهش میکنم کمک کنید به من… این تکه کد مربوط به همون بخشه.
}
.star-rating{
color: #dddddd;
white-space: nowrap;
font-size: 0;
position: relative;
display: inline-block;
overflow: hidden;
line-height: 100%;
}
.star-rating:before,
.star-rating > span:before {
content: “\f006” “\f006” “\f006” “\f006” “\f006”;
font-family: FontAwesome;
font-size: 12px;
letter-spacing: 1.5px;
line-height: 100%;
}
.star-rating > span{
position: absolute;
top: 0;
left: 0;
color: #fecb00;
line-height: 100%;
overflow:hidden;
}
.star-rating > span:before{
content: “\f005” “\f005” “\f005” “\f005” “\f005”;
}
.product-item.list .product-inner{
display: table;
}
سلام، یک دمو توی سایت codepen.io درست کنید و لینکش رو بزارید تا دوستانتون بتونن بهتون کمک کنند.
در ضمن اگر در پنل بپرسید بهتر هستش:
http://discuss.css-tricks.ir
سلام خیلی خوب بود ممنون ، میشه مثلا اون عنصر رو توی یک تگی مثلا قرار داد و بعد به تو سی اس اس کد :
text-align: center
داد؟ راه حلش استانداررد هست؟ :)
سلام خیلی خوب بود ممنون ، میشه مثلا اون عنصر رو توی یک تگ مثلا p قرار داد و بعد به p تو سی اس اس کد :
text-align: center
داد؟ راه حلش استاندارد هست؟ :)
پ.ن: کامنت قبلی ناقص بود
ایول مرسی
واقعا این آموزش خیلی خوب و عالی بود آقای سیدی،دمتون گرم
ولی برای وسط قرار دادن عمودی اصلا این روش flex را بیان نکردید که خیلی هم راحت تر اون روش justify-content هست که باید ;flex-direction:column را هم تعریف کنیم.این روش پایین را هم اضافه کنید
;display:flex
;align-items:center
یه پست خوب هم دیدم طی این چند هفته اخیر تو وب !
ممنون و خسته نباشید.
شما که ماشالا جواب نظرات رو نمیدی یا خیلی دیر میدی فقط لطف کنید قابلیت دانلود مقاله به صورت pdf رو به سایتتون اضافه کنید خیلی کاربردی هستش.
سلام خدمت مهندس عزیزم من خیلی از این صفحه شما استفاده کردم
متشکرم
سلام عزیز عذر میخوام میشه در مورد فایل های css یکم توضیح بدید مثلا ابتدا فایل های css ی کلمه s دارید و اینکه فایل css کاملی دارید در حالی که باید ی فایل داشتید چند تا فایل css دارید ؟ منظور وب سایت خودتون هستش؟
آقا خدا پدرتو بیامرزه
قشنگ گیره کارمو گرفتی
دمت گرم
سلام
اگر عنصر پدر را flex بدی و بعد عنصر فرزند را margin:auto بدی عنصر وسط میاد
عالی بود
این همه وقته با flex کار میکنم این به ذهنم نرسیده بود. همیشه میومدم justify-content: center و align-items: center میدادم که عنصر بیاد وسط. با margin:auto خیلی راحت و بی دردسر و با کد کمتر
ممنون از شما
سلام
کارتون واقعا خوبه.
سلام….درمورد این line-height یکم توضیح می دی چه جوری عنصر در وسط قرار میگیره ؟
کاش میتونستم از طریق عکس مشکلم رو بگم ،
راه حل بهترش اینه که یک دمو توی سایت jsbin.com یا codepen.io بسازید و لینک بدید بررسی کنیم.
سلام
آموزشهاتون واقعا درجه یک و بی نظیره …. ممنون
فوق العاده کاربردی بود این محتوی
ممنونم
سلام. سال نو مبارک.
آقای سیدی این مطلب خیلی خوب بود. من با خوندن این مطلب و تمرین کردن مطالبی که گفتید کامل به موضوع وسط چین کردن عناصر مسلط شدم و یه باری از رو دوش من برداشتید.
قبلا برای وسط قرار دادن عناصر خیلی کار میکردم ولی اون چیزی که میخواستم بشه نمیشد. به کمک مطلب شما تقریبا تمام عناصری که استفاده کردم رو میتونم به وسط صفحه منتقل کنم و هر بلایی دوس داشتم سرشون بیارم.
ممنون بابت این مطلب خفنی که نوشتید.
سلام وقت به خیر استاد
ببخشید مزاحم شدم
اگه زحمتی نیست لطفا یه توضیحی درباره اینکه چطوری یه منوی drop-down رو که با لیست ها درست شده رو در وسط صفحه وب سایت قرار بدم.راستیتش توضیحات داخل وب سایتتون در این مورد به کارم نیومد.
ممنون میشم اگه یه جوابی بهم بدین.
با تشکر از سایت خوبتون.
سلام خسته نباشید من می خوام یک عکس و تصویر رو در کنار هم قرار بدم نه زیر هم وسط کنارهم باشه ولی نمیشه باید چیکار کنم؟؟؟؟
سلام، این روزها راحت ترین کار استفاده از فلکس‌باکس هستش در نتیجه باید فلکس باکس یاد بگیرید:
http://css-tricks.ir/reference/flexbox
سلام خیلی عالی بود مرسی
سلام واقعا از بهترین سایت های آموزشی هستید بسیار بسیار بسیار متشکرم از شما
واقعا ممنونم مشکل من به راحتی حل شد
به شدت عالی بود خیلی مطالب خوب و همینطور کارآمد بودن مرسی واقعا.
خیلی خوب و مفید بود.
سلام من چهار تا تگ دایو دارم یک یک تگ دایو اصلی یک تگ دایو دیگ درون تگ اصلی و یک تگ دایو دیگ درون فرزند تگ دایو و یک تگ ایمیج در آخر که درون یک تگ دایو
درون تگ دوم اچ ۱ دادم و یک مقداری نوشتم و درون تگ سوم یک اچ ۳ دادم و یک مقداری نوشتم و بعد اومدم پایین و به دایو باز کردم و داخلش یک ایمیج دادم و به ایمیج کلاس دادم. تا اینجا او تی ام ال تمام
حالا اومدم برای تگ دایو اصلیم دیسپلی فلکس فلکس رو دادم و برای تگ دومیم دیسپلی فلکس رو مارجین لفتpx ۷۳۰ و مارجین تاپ ۵۰px و فلکس فلو کلومن دادم و حالا اومدم برای دیو سومیم یک ویت ۵۰ دادم تا متنش افقی بش و مارجین تاپ ۱۵۰ px دادم و برای دیو ایمیجم اومدم مارجین تاپ ۱۰ px دادم و برای کلاس ایمیجم اومدم یک مارجین لفت ۸۶۰ px دادم و تمامم
خروجی کار من این شد
مقدار
تصویر. مقدا
ر
یعنی من میخوام متنم در کنار تصویر به صورت افقی نوشته بشه که نمی شه وقتی زیاد تر از متن بالا میشه عمودی می نویسه و میخوام طوری تعیین بش که من از سمت چپ تصویر و فضای وسط باقی مانده کنار مقدار ها وسط بالا پایین کلا در اختیار من برای متن نوشتن بش باید چیکار کنم؟ ممنون از وقتی که می گذارید
tnx for yuor
با سلام علت اینکه با وسط چین کردن center تصویر وسط نمیاد چیه ؟
من فقط از background color و center استفاده میکنم ولی اتفاقی نمیافته ، مشکل چیه ؟
Display عنصرم که div هست رو table میذارم ناپدید میشه
چرا؟