مشاوره رایگان
دریافت لینک های دانلود
دریافت پستی درب منزل
مبلغ کل:
تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید
قرار دادن عناصر در مرکز محور عمودی
قرار دادن عناصر در مرکز محور عمودی
قرار دهی عناصر در مرکز محور عمودی با کمک CSS یا Bootstrap به ویژه برای توسعه دهندگانی که طراح CSS نیستند ، همیشه چالش برانگیز بوده است. در این مقاله ، روشهای مختلف در بوت استرپ 4 را می بینیم که می توانیم به کمک آن عنصری را در مرکز محور عمودی تگ والدش قرار دهیم.
Bootstrap 4 دارای ویژگی های جدید بسیاری است که دستیابی به اهداف مورد نیاز در طراحی های مختلف را آسان تر از قبل می کند. برای قرار دادن عناصر در مرکز محور عمودی ، Bootstrap 4 تکنیک های مختلفی را ارائه می دهد ، مانند:
- Auto-margin همراه با Flexbox ،
- کلاس های کمکی بوت استرپ برای Flex
- ابزارهای تراز عمودی برای تغییر ترازبندی عمودی عناصرinline ، inline-block ، inline-table و خانه های table در ترکیب با کلاس های کمکی بوت استرپ برای Display
وقتی می خواهید یک عنصر را در مرکز محور عمودی قرار دهید ، احتمالاً به استفاده از ابزارهای Vertical Align که توسط بوت استرپ ارائه می شود فکر می کنید که فقط با عناصر inline کار خواهد کرد اما اگر بخواهید یک عنصر را در مرکز محور عمودی تگ والد آن قرار دهید ، چه می کنید؟
فرض کنید دو عنصر <div> با کلاس های بوت استرپ row و col-md-12 داده شده است و می خواهیم ستون (تگ دارای کلاس col-md-12) را در مرکز محور عمودی سطر (تگ دارای کلاس row) قرار دهیم. در ادامه روش های مختلف انجام این کار را در بوت استرپ می بینیم.
<body>
<div class="container">
<div class="row">
<div id="col" class="col-md-12">
This needs to be vertically centered.
</div>
</div>
</div>
</body>
قرار دادن در مرکز محور عمودی با Auto Margin
با استفاده از auto margin (حاشیه های خودکار) می توانید عنصر col# را در مرکز محور عمودی والدش قرار دهید اما ابتدا باید والد را full-height (تمام قد) کنید.
کلاس h-100 را به سطر (row) اضافه کنید که باعث می شود ارتفاع کامل موجود در والد خود را بدست آورد. در مرحله بعدی ، می توانید عنصر را با استفاده از کلاس کمکی my-auto در مرکز محور عمودی قرار دهید:
<body>
<div class="container">
<div class="row h-100">
<div id="col" class="col-md-12 my-auto">
This needs to be vertically centered.
</div>
</div>
</div>
</body>
استفاده از کلاس کمکی my-auto برای تنظیم حاشیه های خودکار در محور y استفاده می شود ، در نام این کلاس کلمه my به معنای حاشیه (Margin) در محور y است. استایل هایی که در کلاس my-auto این کار را انجام می دهد در زیر می بینید :
margin-top: auto;
margin-bottom: auto;
قرار دادن در مرکز محور عمودی با Flexbox
بوت استرپ 4 از Flexbox استفاده می کند. به همین دلیل ، می توانید از ابزارهای Flexbox استفاده کنید تا به راحتی به تکنیک های مختلفی مانند قرار دهی در مرکز محور عمودی دست پیدا کنید.
می توانید از کلاس align-self-center در یک تگ برای قرار دادن آن در مرکز محور عمودی استفاده کنید به شرطی که عنصر والد آن دارای ویژگی display: flex باشد:
<body>
<div class="container">
<div class="row">
<div id="col" class="col-md-12 align-self-center">
This needs to be vertically centered.
</div>
</div>
</div>
</body>
عنصری که کلاس row دارد تگ flex است بنابراین ابزارهای Flexbox به خوبی روی آن کار می کنند. همچنین می توانید از کلاس align-items-center در تگی که کلاس row دارد استفاده کنید تا تمام فرزندان آن را در مرکز محورعمودی آن قرار دهید.
فصلِ:
5
,
تعداد قسمت ها:
176
,
سطح:
صفر تا صد
این فصل در یک نگاه:
در این فصل پس از بررسی سیستم مسیریابی و طراحی صفحه نمایش ویدیو ها، به سراغ پنل کاربری خواهیم رفت و مباحث Model Binding و…
توجه: این دوره آموزشی به صورت پیوسته بر اساس آخرین نسخه ی ASP.NET Core بروزرسانی خواهد شد. آموزش صفر تا صد طراحی سایت اشتراک ویدیو مشابه آپارات با استفاده از ASP.NET CORE MVC 3.0 و V…
فصلِ:
5
,
تعداد قسمت ها:
135
,
سطح:
صفر تا صد
این فصل در یک نگاه:
…
توضیحات کلی مجموعه: در این مجموعه آموزشی، با استفاده از جدیدترین تکنولوژی ها و ابزار های مایکروسافت (دات نت)، به یک پروژه جذاب مدیریت آگهی مشابه دیوار می پردازیم. این آموزش در دو بخش کلی و…
فصلِ:
2
,
تعداد قسمت ها:
13
,
سطح:
صفر تا صد
موضوعات:
آموزش Bootstrap
این فصل در یک نگاه:
مباحث ریسپانسیو سازی شامل نقاط شکست مختلف - گرید سیستم - فلکس باکس - …
توجه : این دوره هیچ پیش نیازی ندارد و تمام مطالب از صفر آموزش داده شده است. از این رو شما برای شروع این دوره به هیچ مقدمه یا دوره دیگری نیاز ندارید. ویژگی های دوره آموزش بوت استرپ ۵ : - آم…
فصلِ:
6
,
تعداد قسمت ها:
23
,
سطح:
صفر تا صد
موضوعات:
آموزش Bootstrap
این فصل در یک نگاه:
فصل ششم: پروژهپروژه ا : ساخت یک قالب واکنشگرای گروه موسیقیپروژه 2 : ساخت قالب واکنشگرای سایت 5040…
سرفصل دوره آموزش فریم ورک بوت استرپ فصل اول : معرفی بوت استرپ طراحی واکنشگرا ( Responsive Design ) چیست ؟ با مفهوم طراحی واکنشگرا آشنا خواهید شد و تفاوت بین سایت واکنشگرا و سایت نسخه ی …
فصلِ:
4
,
تعداد قسمت ها:
78
,
سطح:
متوسط
موضوعات:
آموزش ASP.NET
آموزش ASP.NET MVC
آموزش JQUERY
آموزش HTML5
آموزش Ajax
آموزش Bootstrap
آموزش JAVASCRIPT
این فصل در یک نگاه:
…
در این دوره آموزشی، وبسایت ورزش3 را با استفاده از ASP.NET Core پیاده سازی می کنیم و همچنین اپ اندروید آن را هم با Xamarin متصل به سرور سایت طراحی و در نهایت نحوه انتشار آن در مارکت هایی مثل …
فصلِ:
4
,
تعداد قسمت ها:
240
,
سطح:
صفر تا صد
موضوعات:
آموزش PHP
آموزش Bootstrap
آموزش CSS
آموزش JQUERY
آموزش HTML
آموزش PHP MVC
آموزش Ajax
آموزش HTML5
این فصل در یک نگاه:
طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…
توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ:
5
,
تعداد قسمت ها:
201
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش Bootstrap
آموزش برنامه نویسی آندروید
این فصل در یک نگاه:
ایجاد پروژه آژانس مسافرتی.....…
فصل اول: آشنایی با مبانی برنامه نویسی اندروید آشنایی با معماری برنامه های اندرویدی ساخت شبیه ساز جهت تست پروژه اندروید آشنایی با دستور Toast و حلقه for در برنامه های اندروی…
فصلِ:
1
,
تعداد قسمت ها:
2
,
سطح:
متوسط
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش PHP
آموزش Ajax
آموزش Bootstrap
آموزش Laravel
آموزش PHP MVC
آموزش ایمیل مارکتینگ
آموزش وردپرس
این فصل در یک نگاه:
بهترین و پر بازده ترین روش تبدیل بازدیدکننده سایت به مشتری تبلیغات هدفمند و برند سازی هوشمندانه با ایمیل می باشد. ایمیل…
وبینار(سمینار آنلاین) آموزش تکنیک های ایمیل مارکتینگ اگر تا انتها این متن را مطالعه کنید نظر شما در مورد ایمیل مارکتینگ 180 درجه عوض می شود!! بر هیچکس پوشیده نیست که از سال 1972 که ای…
فصلِ:
4
,
تعداد قسمت ها:
368
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش ساخت فروشگاه اینترنتی
آموزش Bootstrap
آموزش Laravel
این فصل در یک نگاه:
مباحث تکمیلی فریم ورک لاراول…
فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ:
1
,
تعداد قسمت ها:
155
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش NodeJs
آموزش Bootstrap
آموزش Laravel
آموزش Symphony
این فصل در یک نگاه:
مباحث مقدماتی فریم ورک react.js…
توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
