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

مدیر سایت در تاریخ ارديبهشت 18, 1395 09:43

برای وسط چین کردن عمودی تگ ها در بیشتر مواقع از margin و padding و position استفاده میشود که از لحاظ وسط چین بودن زیاد دقیق به نظر نمیرسد.راه حل بهتر برای این کار استفاده از تگ flex است.

در کد زیر آموزش استفاده از این تگ برای طراحی وب سایت بیان شده است.

برای استفاده از تگ flex یک کلاس یا id در کد برنامه نویسی خود قرار دهید و سپس به فرزندان آن تگ flex را بدهید و طرز کد نویسی آن در html طراحی وب سایت :

طرز کد نویسی در css

.horizontal-center {

display : -ms-flexbox ;

display: -webkit-flex;

display: flex;

-ms-flex-align: center;

-webkit-align-items: center;

-webkit-box-align: center;

align-items: center;

}

برای آنکه تگ به صورت افقی هم وسط چین شود کد زیر را به css خود اضافه کنید.

justify-content:center;

نکته : به تگی که می خواهید فرزندان آن وسط چین شوند باید width و height بدهید تا ارتفاع پدر را تشخیص دهند.

عملیات: ایمیل | لینک مستقیم |

مقالات

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

تصاویر مرتبط