როგორ გავამახვილო ტექსტი ვერტიკალურად და Div ჰორიზონტალურად?
როგორ გავამახვილო ტექსტი ვერტიკალურად და Div ჰორიზონტალურად?

ვიდეო: როგორ გავამახვილო ტექსტი ვერტიკალურად და Div ჰორიზონტალურად?

ვიდეო: როგორ გავამახვილო ტექსტი ვერტიკალურად და Div ჰორიზონტალურად?
ვიდეო: How to align items center Horizontally and Vertically || HTML and CSS Important Tricks 🤫🤫🤫🤫🤫 2024, ნოემბერი
Anonim

ამისთვის ვერტიკალური განლაგება დააყენეთ ძირითადი ელემენტის სიგანე/სიმაღლე 100%-ზე და დაამატეთ ჩვენება: ცხრილი. შემდეგ ბავშვის ელემენტისთვის შეცვალეთ ეკრანი ცხრილის უჯრედად და დაამატეთ ვერტიკალური - გასწორება : შუა. ამისთვის ჰორიზონტალური ცენტრირება , შეგიძლიათ დაამატოთ ტექსტი - გასწორება : ცენტრი რომ ცენტრი The ტექსტი და ნებისმიერი სხვა inline საბავშვო ელემენტები.

უბრალოდ, როგორ ასწორებთ ტექსტს ვერტიკალურად ცენტრში?

დააყენეთ აბსოლუტური პოზიციონირება და უარყოფითი ზღვარი ჩვენ შეგვიძლია ტექსტის ვერტიკალურად გასწორება ერთად პოზიცია და ზღვრის თვისებები, რომლებიც გამოიყენება ბლოკის დონის ელემენტებთან. არ დაგავიწყდეთ დააყენოთ თქვენთვის სასურველი ელემენტის სიმაღლე ცენტრი . კომპლექტი: 50%; და დარჩა: 50%; რომ ცენტრი ბავშვის მარცხენა კუთხე.

გარდა ამისა, როგორ გავაჩერო div ჰორიზონტალურად? ვნახოთ a-ს ჰორიზონტალურად ეტაპობრივად ცენტრირება:

  1. დააყენეთ გარე ელემენტის სიგანე (ანუ 100% მოიცავს მთელ ხაზს).
  2. დააყენეთ margin თვისება auto-ზე, რათა ელემენტი ჰორიზონტალურად იყოს გვერდის შიგნით.
  3. დააყენეთ სასურველი ფერები გარე და შიდა დივებისთვის ფონის ფერის თვისების გამოყენებით.

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

  1. დააწკაპუნეთ უჯრედზე, სადაც გსურთ შიგთავსის ცენტრირება.
  2. დააწკაპუნეთ "მთავარი", შემდეგ დააწკაპუნეთ პატარა ისარს ლენტის "Alignment" ზონის ქვედა კუთხეში.
  3. დააწკაპუნეთ ჩამოსაშლელ ველზე "ჰორიზონტალური" გვერდით და აირჩიეთ "ცენტრი". იგივე გააკეთე "ვერტიკალის" გვერდით მდებარე ველში.
  4. დააწკაპუნეთ "OK" თქვენი ტექსტის ცენტრში.

როგორ გავამახვილო ვერტიკალურად div ცენტრი?

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

გირჩევთ: