@نیماووجینیما اووجی
یک توسعه دهنده وب Full-Stack با استفاده از asp.net. فرم های C # ، js ، برنده شوید
سلام ، نام من نیما اووجی است. امروز ، من می خواهم به شما نشان دهم “چگونه می توان با استفاده از Flexbox یک div را در مرکز صفحه قرار داد”. بیا شروع کنیم!
ایجاد پرونده ها
اول از همه ، ما باید پرونده های خود را ایجاد کنیم.
- index.html
- styles.css
ما سبک های خود را در “styles.css” می نویسیم.
نوشتن کدهای HTML
خوب ، اکنون ، ما باید کدهای HTML خود را بنویسیم:
<html lang="en" dir="ltr"
<head
<meta charset="utf-8"
<titleCentered Divtitle
<link rel="stylesheet" href="styles.css"
head
<body
<div class="container"
div
body
html
همانطور که در اینجا مشاهده می کنید ، من “styles.css” را به عنوان یک صفحه سبک پیوند دادم و همچنین یک ایجاد کردم
divدر بدن. که
divدارای کلاس “کانتینر” است ، ما از این کلاس برای افزودن برخی سبک ها به آن استفاده خواهیم کرد!
بعد از این ، ما چیزی نمی بینیم زیرا
divخالی است!
نوشتن سبک های CSS
در “styles.css” باید بسازیم
bodyو
htmlبرچسب ها تمام صفحه. ما این کار را با تغییر
heightبه “100vh”.
html, body
{
height: 100vh;
}آنها اکنون تمام صفحه هستند! پس از آن ، ما باید یک رنگ پس زمینه به اضافه کنیم
container divتا قابل مشاهده باشد. همچنین باید اضافه کنیم
heightو
widthبه آن
div.
.container
{
background-color: #efefef;
width: 70vw;
height: 78vh;
border-radius: 5px;
}
من همچنین اضافه کردم
border-radiusتا زیباتر شود!
اکنون،…