გამოიწერე YouTube-ის არხიyoutube white icon svg გამოწერა

როგორ გავასწოროთ HTML ელემენტი ცენტრში

HTML, CSS-ის ინტენსიური კურსი

კურსის დასრულების შემდეგ შეძლებთ HTML CSS-ით ააწყოთ კომპლექსური ვებ გვერდები.

გაიგე მეტი

ხშირად დამწყებმა დეველოპერებმა არ იციან, თუ როგორ გამოიყენონ კონკრეტული CSS-ის თვისებები პრაქტიკაში.

საკმაოდ ბევრ სტუდენტს აქვს შეკითხვა, თუ როგორ გაასწოროს ელემენტი ჰორიზონტალურად და ვერტიკალურად ცენტრში, ამისთვის არსებობს 2 მეთოდი.

I - flexbox-ის გამოყენებით

HTML

<div class="box">
  <div class="element"></div>
</div>

CSS

.box {
  width: 300px;
  height: 300px;
  background: #ccc;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.element {
  width: 100px;
  height: 100px;
  background: dodgerblue;
}

II - grid-ის გამოყენებით

.box {
  width: 300px;
  height: 300px;
  background: #ccc;
  margin: auto;
  display:grid;
}
.element {
  width: 100px;
  height: 100px;
  background: dodgerblue;
  margin: auto;
}

კურსში შემავალი თემები

კომენტარები 0

საიტის აწყობა (ავტორიზაცია) საიტის აწყობა (რეგისტრაცია, პაროლის აღდგენა) საიტის აწყობა (header, nav, footer), ცოტა რამ display:flex-ზე საიტის აწყობა, როგორ მუშაობს CSS flexbox (display: flex;) საიტის აწყობა (ბლოგის გვერდი, ნაწილი #1) Git-ის დაყენება Windows-ზე Linux-ის ძირითადი ბრძანებები ვებ-დეველოპმენტისთვის CSS position property, ვისწავლოთ CSS პოზიციები ფონტების მიბმა საიტზე, როგორ მივაბათ ფონტები CSS @import and CSS variables, იმპორტი და ცვლადები CSS-ში html tables, ცოტა რამ ცხრილების შესახებ როგორ შევქმნათ და ავტვირთოთ პროექტი Git-ზე ბლოგის გვერდი #2, ვაწყობთ ქარდებს display: grid; თვისება, რომელიც აუცილებელია ვიცოდეთ display:grid-ის საზომი ერთეულები fr-ები (fractions) ბლოგის ლისტის გვერდის დასრულება display:grid-ის დახმარებით ბლოგის დეტალური გვერდის დასრულება კონტაქტის გვერდის დასრულება დახმარების გვერდის დასრულება საიტის აწყობა: ცოტა რეფაქტორინგი და ბოქსმოდელის განხილვა საიტის აწყობა: პირელი ნაბიჯები რესპონსივ დიზაინში საიტის აწყობა: რესპონსივი, მთავარი გვერდი საიტის აწყობა: მობილური ნავიგაცია როგორ გავასწოროთ HTML ელემენტი ცენტრში როგორ გავაკეთო dark theme