<Div> üfüqi olaraq necə mərkəzləşirsiniz?

CSS-dən başqa bir <div> <div> yatay olaraq <div> necə ola bilərəm?

22 сент. Lukas tərəfindən hazırlanan 22 sentyabr 2008-09-22 15:27 '08 at 15:27 2008-09-22 15:27
@ 94 cavab

Bu CSS-in daxili <div> -ə müraciət edə bilərsiniz:

 #inner { display: table; margin: 0 auto; } 

Daxili elementi mərkəzə üfüqi bir şəkildə width müəyyən bir width qoymadan işləyəcəkdir.

Burada iş nümunəsi:

 <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div> 
4233
22 сент. Cavab 22 sentyabrda Justin Poli tərəfindən verilir . 2008-09-22 15:29 '08 at 3:29 pm 2008-09-22 15:29

Bir daxili div sabit genişlik qurmaq istəmirsinizsə, belə bir şey edə bilərsiniz:

border=0
 <div id="outer"> <div id="inner">Foo foo</div> </div> 

Bu, daxili div text-align ilə mərkəzləşdirilə bilən inline elementi təşkil edir.

1139
21 янв. Alfred Jan 21'ye cavab verin 2011-01-21 01:55 '11 'də 1:55' də 2011-01-21 01:55

CSS 3- ə ən yaxşı yanaşmalar.

Box model:

 #outer { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; } 

Uşaqların mərkəzləşdirilməsi haqqında daha çox məlumat əldə edin.

bu, qutu modelinin ən yaxşı niyə uyğun olduğunu izah edir :

318
30 авг. 30 Avqustda Konga Raju'ya cavab verdi 2012-08-30 15:05 '12 at 15:05 2012-08-30 15:05

200px geniş olduğunu varsayalım:

quraşdırıldığından, yəni nisbi, sabit, mütləq və ya yapışqan olduğundan əmin olun. 

Divunuzun genişliyini bilmirsinizsə, transform:translateX(-50%); istifadə edə bilərsiniz transform:translateX(-50%); əvəzinə mənfi bir sahə.

https://jsfiddle.net/gjvfxxdj/

224
01 дек. cavab nuno_cruz 01 dekabr verilir . 2011-12-01 22:52 '11 'də saat 22: 52-da 2011-12-01 22:52

Mən bu nümunəni dikeyüfüqi bir şəkildə necə göstərmək üçün yaratdım.

Bu əsasən koddur:

 #outer { position: relative; } 

və ...

 #inner { margin: auto; position: absolute; left:0; right: 0; top: 0; bottom: 0; } 

ekranda ölçüsünü dəyişsən də , center qalacaq.

203
11 сент. Cavab Tom Maton Sep 11 2013-09-11 14:32 '13 at 14:32 2013-09-11 14:32

Bəzi plakatlar, display:box istifadə edərək mərkəz üçün CSS 3-dən necə istifadə edildiyini xatırlatdılar display:box .

Bu sintaksis köhnəlmiş və artıq istifadə edilməməlidir. [Bax Həm də bu yazı] .

Beləliklə, tamlıq üçün, CSS 3- ə çevik layout modulundan istifadə etmək üçün son yol.

Buna görə, sadə bir biçimlendirme varsa:

 <div class="box"> <div class="item1">A</div> <div class="item2">B</div> <div class="item3">C</div> </div> 

... və elementləri sahə içində yerləşdirmək istəyirsən, bu üst elementdə (.box) lazım olanıdır:

 <div class="box"> <div class="item1">A</div> <div class="item2">B</div> <div class="item3">C</div> </div> 

Flexbox üçün köhnə sözdizimini istifadə edən köhnə brauzerləri dəstəkləməlisinizsa , bu baxmaq üçün yaxşı bir yerdir.

166
22 апр. 22 Aprel tarixində Danield tərəfindən verilmiş cavab 2013-04-22 13:32 '13 at 13:32 2013-04-22 13:32

Müəyyən bir genişlik təyin etmək və əlavə bir sahədə istəmirsinizsə, element əlavə edin display: inline-block elementinizə əlavə edin.

Siz istifadə edə bilərsiniz:

122
13 мая '12 в 2:45 2012-05-13 02:45 Cavab Salman Abbas tərəfindən 13 may, 12: 00-da, 2012-05-13 02:45
11 марта '12 в 16:37 2012-03-11 16:37 Cavab neoneye 11 Mart, '12 'də 4:37' də verildi 2012-03-11 16:37

Genişlik verməyincə mərkəzləşdirilə bilməz, əks halda bütün üfüqi yerlərə u mənim olacaq.

76
22 сент. cavab 22 sentyabr gizmo tərəfindən verilir 2008-09-22 15:30 '08 saat 15:30 'da 2008-09-22 15:30

Genişliyi seçin və margin-leftmargin-right auto . Bu, yalnız üfüqi üçün . Hər iki istiqamətdə də istəsəniz, hər iki istiqamətdə də bunu edə bilərsiniz. Denemekten qorxmayın; bir şey qırmaq kimi deyil.

75
25 июля '09 в 1:00 2009-07-25 01:00 cavab 25: 00-da, 1: 00-da, 2009-07-25 01 : 00-da Sneakyness tərəfindən verilir

Bilinməyən hündürlüyü və genişliyi bir div mərkəzləşdirir

Horizontal və şaquli. Bu, olduqca müasir brauzerlər (Firefox, Safari / WebKit, Chrome, Internet Explorer 10, Opera və s.) İlə işləyir.

 <div class="content">This works with any content</div> 

Codepen və ya JSBin- də onu daha da dərhal buraxın .

75
17 мая '14 в 21:38 2014-05-17 21:38 iamnotsam tərəfindən verilmiş cavab 17 may 2014- cü il saat 21 : 38- da olacaq

Son zamanlarda, səhifəyə yönəldilməsi nəzərdə tutulan bir forma olan bir "gizli" div (yəni ekran: heç bir;) mərkəzinə köçürdüm. Gizli divu göstərmək üçün aşağıdakı jQuery yazdım və CSS-ni avtomatik olaraq masanın genişliyini yaratmaq və marjın mərkəzə dəyişdirmək üçün yeniləndi. (Ekranın açarı linkə tıklayaraq tetiklenir, lakin bu kod mütləq göstərilmir.)

Qeyd. Bu kodu istifadə edirəm, çünki Google məni bu həllinə gətirdi və hər şey işləyəcək, gizli elementlər geniş deyil və nümayiş olunana qədər dəyişdirilə bilməz.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="inner" style="display:none;"> <form action=""> <table id="innerTable"> <tr><td>Name:</td><td><input type="text"></td></tr> <tr><td>Email:</td><td><input type="text"></td></tr> <tr><td>Email:</td><td><input type="submit"></td></tr> </table> </form> </div> 
53
24 июня '11 в 0:42 2011-06-24 00:42 Cavab 24 İyun 2012 tarixində 0:42 2011-06-24 00:42 tarixində James Moberg tərəfindən verilmişdir

Mən adətən mütləq bir mövqedən istifadə edirəm:

 #inner{ left: 0; right: 0; margin-left: auto; margin-right: auto; position: absolute; } 

Bunun üçün xarici divə əlavə xüsusiyyətlərə ehtiyac yoxdur.

47
07 апр. Cavab william44isme tərəfindən verilir 07 Apr 2013-04-07 11:22 '13 at 11:22 2013-04-07 11:22

Firefox və Chrome üçün:

 <div style="width:100%; text-align:center;"> <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div> </div> 

text-align: müasir brauzerlər üçün mülk tələb olunur, lakin Quirks Internet Explorer rejimində köhnə brauzerləri dəstəkləmək lazımdır.

46
31 мая '12 в 18:32 2012-05-31 18:32 cavab 31 may, saat 12: 00 -da veriləcək

Bu mənim cavabımdır.

 <div id="outerDiv"> <div id="innerDiv">Inner Content</div> </div> 
42
19 июля '13 в 13:21 2013-07-19 13:21 Cavab Ankit Jain tərəfindən verilir 19 iyul '13 13:21 2013-07-19 13:21

Elementlərdən birinin genişliyini təyin etmədən bunun üçün başqa bir həll CSS 3 transform xüsusiyyətindən istifadə etməkdir.

 #outer { position: relative; } #inner { position: absolute; left: 50%; transform: translateX(-50%); } 

Hiylə ki, translateX(-50%) #inner elementini öz eninin solunda 50 faiz təşkil edir. Şaquli hizalamaq üçün eyni hiylədən istifadə edə bilərsiniz.

Burada Fiddle yatay və şaquli düzəldir.

Mozilla Geliştirici Şəbəkəsi haqqında daha çox məlumat əldə edin.

38
12 марта '15 в 17:01 2015-03-12 17:01 Cavab Kilian Stinson tərəfindən 12 mart 15: 15-də verilir, 2015-03-12 17:01

Bloqun Bilinməyən Bölməsində Mərkəzləşdirmədə böyük bir vəzifə yazan Chris Koyer. Bu, bir neçə həllərin nəzərdən keçirilməsidir. Mən bu suala cavab verməyən bir mesaj göndərdim. Daha çox brauzer dəstəyi var, daha sonra bir flexbox həlli və display: table; istifadə etmirsiniz display: table; digər şeyləri poza bilər.

  .outer { text-align: center; }  .outer:before { content: '.'; display: inline-block; height: 100%; vertical-align: middle; width:0; overflow:hidden; }  .inner { display: inline-block; vertical-align: middle; width: 300px; } 
37
25 окт. Cavab 25 oktyabrda Willem de Wit tərəfindən verilir . 2013-10-25 14:53 '13 'da 14:53 2013-10-25 14:53

Anlayıram ki, oyunda gecikirəm, amma bu, çox populyar bir sualdır və mən yaxınlarda başqa bir yerdə görmədim ki, bir yanaşma tapdım, buna görə qərar verəcəyəm.

 #outer { position: absolute; left: 50%; } #inner { position: relative; left: -50%; } 

EDIT: hər iki element düzgün işləmə üçün eyni genişlik olmalıdır.

31
27 мая '13 в 19:12 2013-05-27 19:12 Cavab Benjamin RH tərəfindən 27-dən 13-də saat 19: 00-da 2013-05-27 19:12

Məsələn, aşağıda bu link və snippetə baxın:

 <div id="outer" style="width:100%;"> <div id="inner">Foo foo</div> </div> 

Valideynlərinizin yanında bir çox uşaq varsa, CSS-nin məzmunu skripka üzrə bu nümunə kimi olmalıdır.

HTML məzmunu belə görünür:

 <div id="outer" style="width:100%;"> <div class="inner"> Foo Text </div> <div class="inner"> Foo Text </div> <div class="inner"> Foo Text </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> Foo Text </div> </div> 

Sonra bu nümunəyə skripka baxın .

27
04 дек. Cavab Lalit Kumar 04 dekabrda verilir. 2013-12-04 10:30 '13 saat 10:30 'da 2013-12-04 10:30

Ən asan yol:

 <div id="outer"> <div id="inner">Blabla</div> </div> 
25
22 авг. cavab verildi joan16v 22 aug. 2014-08-22 15:10 '14 saat 15:10 2014-08-22 15:10

Yalnız yatay mərkəzləşdirmə

Mənim təcrübəmdə, qutuyu yatay şəkildə mərkəzləşdirmək üçün ən yaxşı üsul aşağıdakı xüsusiyyətləri tətbiq etməkdir:

Konteyner:

  • text-align: center; olmalıdır text-align: center;

Məzmun sahəsi:

  • display: inline-block;

Demo versiyası:

 <div class="container"> <div class="centered-content"> Center this! </div> </div> 

Bu skripka da baxın!


Yatay və dikey olaraq həm mərkəzləşmə

Mənim təcrübəmdə, həm dikey, həm də üfüqi olaraq qutusu mərkəzləşdirmək üçün ən yaxşı yol əlavə bir qab istifadə etmək və aşağıdakı xüsusiyyətləri tətbiq etməkdir:

Xarici konteyner:

  • göstəricisi olmalıdır display: table;

Daxili konteyner:

  • display: table-cell; olmalıdır display: table-cell;
  • vertical-align: middle; olmalıdır vertical-align: middle;
  • text-align: center; olmalıdır text-align: center;

Məzmun sahəsi:

  • display: inline-block;

Demo versiyası:

 <div class="outer-container"> <div class="inner-container"> <div class="centered-content"> Center this! </div> </div> </div> 

Bu skripka da baxın!

25
19 февр. 19 Fevralda John Slegers tərəfindən verilmiş cavab 2016-02-19 19:57 '16 saat 19:57 'da 2016-02-19 19:57

Bu kimi bir şey edə bilərsiniz.

 #container { display: table; width: <width of your container>; height: <height of your container>; } #inner { width: <width of your center div>; display: table-cell; margin: 0 auto; text-align: center; vertical-align: middle; } 

Bu da # #inner dikey olaraq #inner . İstəmirsinizsə, displayvertical-align xassələrini çıxarın;

22
14 окт. Cavab 14 oktyabrda Kennet Palaganas tərəfindən verilir . 2013-10-14 15:09 '13 at 15:09 2013-10-14 15:09

Heç vaxt istəmirsiniz.

Jsfiddle

 #outer { margin - top: 100 px; height: 500 px;  border: 1 px solid# ccc; } #inner { border: 1 px solid# f00; position: relative; top: 50 % ; transform: translateY(-50 % ); } 
22
28 янв. cavab janiz 28 jan verilir . 2014-01-28 12:55 '14 da 12:55 2014-01-28 12:55

Text-align: mərkəz

text-align: center istifadə text-align: center , inline məzmun simli sahəsində mərkəzləşdirilmişdir. Lakin, default daxili div width: 100% olduğundan width: 100% , müəyyən bir genişlik təyin etməlisiniz və ya aşağıdakı dəyərlərdən birini istifadə etməlisiniz:

 <div id="outer"> <div id="inner">Foo foo</div> </div> 

Margin: 0 avto

margin: 0 auto istifadə margin: 0 auto başqa seçimdir və köhnə brauzerlər ilə uyğunluq üçün daha uyğundur. display: table ilə birlikdə işləyir display: table .

 <div id="outer"> <div id="inner">Foo foo</div> </div> 

Flexbox

display: flex bir blok elementi kimi hərəkət edir və onun məzmununu flexbox modelinə görə göstərir. Bu justify-content: center işləyir justify-content: center .

Xahiş edirik unutmayın: flexbox ən çox brauzerlər ilə uyğun gəlir, lakin hamısı deyil. Tam və yenilənmiş brauzer uyğunluğu siyahısına baxın.

 <div id="outer"> <div id="inner">Foo foo</div> </div> 

Transform

transform: translate , CSS vizual formatlaşdırma modelinin koordinasiya yerini dəyişməyə imkan verir. Onu istifadə edərək, elementlər çevrilə bilər, dönmüş, miqyaslı və əyri. Yatay olaraq mərkəzi position: absolute ehtiyacınız var position: absoluteleft: 50% .

 <div id="outer"> <div id="inner">Foo foo</div> </div> 

<center> (köhnəlmiş)

<center> HTML text-align: center alternativdir. Bu, köhnə brauzerlərdə və ən yenilərdə işləyir, amma bu, yaxşı bir təcrübə hesab edilmir, çünki bu funksiya köhnəlmiş və veb standartlarından silinir.

 <div id="outer"> <center> <div id="inner">Foo foo</div> </center> </div> 
21
09 июня '17 в 11:34 2017-06-09 11:34 Cavab Paolo Forgia tərəfindən 09 iyun '09 ' da 11:34 2017-06-09 11:34' də verilir

Bəli, bütün hallara uyğun bir həll tapmağı bacardı, amma JavaScript istifadə edirdi:

İşdə struktur:

 <div class="container"> <div class="content">Your content goes here!</div> <div class="content">Your content goes here!</div> <div class="content">Your content goes here!</div> </div> 

Və burada bir JavaScript parçası:

 $(document).ready(function() { $('.container .content').each( function() { container = $(this).closest('.container'); content = $(this); containerHeight = container.height(); contentHeight = content.height(); margin = (containerHeight - contentHeight) / 2; content.css('margin-top', margin); }) }); 

Cavab yanaşmasında istifadə etmək istəyirsinizsə, aşağıdakıları əlavə edə bilərsiniz:

 $(window).resize(function() { $('.container .content').each( function() { container = $(this).closest('.container'); content = $(this); containerHeight = container.height(); contentHeight = content.height(); margin = (containerHeight - contentHeight) / 2; content.css('margin-top', margin); }) }); 
20
11 февр. Cavab 11 fevralda Miguel Leite tərəfindən verilir. 2014-02-11 18:51 '14 da 18:51 2014-02-11 18:51

Bu metod da böyük işləyir:

 div.container { display: flex; justify-content: center;  align-items: center;  } 

Daxili <div> yalnız vəziyyət onun heightwidth konteynerindən daha yüksək olmamalıdır.

18
23 сент. Billal Beguerad tərəfindən verilmiş cavab 23 sentyabr 2016-09-23 09:49 '16 saat 09:49 2016-09-23 09:49

Mən tapdığım bir variant:

Hər kəs deyir:

 margin: auto 0; 

Ancaq başqa bir seçim var. Bu əmlakı ana div üçün təyin edin. Hər zaman böyük işləyir:

 text-align: center; 

Və baxın, körpə mərkəzə gedir.

Və nəhayət, sizin üçün CSS:

 #outer{ text-align: center; display: block;  } #inner { position: relative; margin: 0 auto;  } 
18
16 нояб. Cavab Pnsadeghy Noyabr 16 tərəfindən verilir . 2013-11-16 22:56 '13 saat 10:56 'da 2013-11-16 22:56

Flex, 97% -dən çox brauzer dəstəyinə malikdir və bu problemləri bir neçə xətdə həll etmək üçün ən yaxşı yol ola bilər:

 #outer { display: flex; justify-content: center; } 
17
03 апр. Sandesh Damkondwar tərəfindən verilmiş cavab 03 Apr 2017-04-03 23:12 '17 'da 11:12' də 2017-04-03 23:12 'də

Oynayırıq

 margin: 0 auto; 

Mətninizi mərkəzləşdirmək istəyirsinizsə, istifadə edin:

 text-align: center; 
17
05 нояб. Cavab 05 noyabr tarixində istifadəçi1817972 tərəfindən verilmişdir. 2013-11-05 18:21 '13 saat 06:21 'da 2013-11-05 18:21

Məzmunun genişliyi məlum deyilsə, aşağıdakı üsuldan istifadə edə bilərsiniz . Bu iki elementə sahib olduqlarını varsayalım:

  • .outer tam genişlik
  • .inner - eni yoxdur (lakin maksimum genişlik müəyyən edilə bilər)

Elementlərin hesablanmış eni sırasıyla 1000px və 300px olduğunu düşünün. Aşağıdakı şəkildə davam edin:

  1. .inner daxilində .center-helper
  2. .center-helper inline blok yaradın; bu .inner 300 piksel genişliklə .inner eyni ölçüdə olur.
  3. Ana .center-helper 50% -i basın; Bu, 500px ağırlığında sola qoyur. açıq hava.
  4. .inner nisbətən sola 50% əlavə edin; Bu, -150px-də sola qoyur. yəni sol küncünün 500 - 150 = 350 px olduğu deməkdir. açıq hava.
  5. .outer daşımaq üçün .outer seçin .outer kaydırma çubuğunu .outer .

Demo versiyası:

 <div class="outer"> <div class="center-helper"> <div class="inner"> <h1>A div with no defined width</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Duis condimentum sem non turpis consectetur blandit.<br> Donec dictum risus id orci ornare tempor.<br> Proin pharetra augue a lorem elementum molestie.<br> Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p> </div> </div> </div> 
 .outer { overflow: hidden; } .center-helper { float: left; position: relative; left: 50%; } .inner { float: left; position: relative; left: -50%; } 
17
17 янв. Cavab 17 yanvarda Salman A tərəfindən verilir . 2014-01-17 21:18 '14 at 21:18 2014-01-17 21:18