Căn chỉnh ngang Div. Căn giữa div và các chi tiết định vị khác
Tôi nghĩ nhiều người trong số các bạn từng làm việc với bố cục đã gặp phải nhu cầu căn chỉnh các phần tử theo chiều dọc và biết những khó khăn nảy sinh khi căn chỉnh một phần tử vào giữa.
Có, có một thuộc tính căn chỉnh theo chiều dọc đa giá trị đặc biệt trong CSS để căn chỉnh theo chiều dọc. Tuy nhiên, trên thực tế nó không hề hoạt động như mong đợi. Hãy thử tìm hiểu điều này.
Hãy so sánh các phương pháp sau. Căn chỉnh bằng cách sử dụng:
- những cái bàn,
- thụt đầu dòng,
- chiều cao giữa các dòng
- kéo dài,
- biên độ âm,
- biến đổi
- phần tử giả
- flexbox.
Có hai phần tử div, trong đó một phần tử được lồng vào phần tử kia. Hãy cung cấp cho họ các lớp tương ứng - bên ngoài và bên trong.
Thử thách là căn chỉnh phần tử bên trong với tâm của phần tử bên ngoài.
Đầu tiên, hãy xem xét trường hợp khi kích thước của khối bên ngoài và khối bên trong được biết đến. Hãy thêm quy tắc display: inline-block vào phần tử bên trong và text-align: center và Vertical-align: middle vào phần tử bên ngoài.
Hãy nhớ rằng căn chỉnh chỉ áp dụng cho các phần tử có chế độ hiển thị nội tuyến hoặc khối nội tuyến.
Hãy đặt kích thước của các khối cũng như màu nền để chúng ta có thể nhìn thấy đường viền của chúng.
Bên ngoài ( chiều rộng: 200px; chiều cao: 200px; căn chỉnh văn bản: giữa; căn chỉnh dọc: giữa; màu nền: #ffc; ) .inner ( hiển thị: khối nội tuyến; chiều rộng: 100px; chiều cao: 100px; màu nền : #fcc; )
Sau khi áp dụng các kiểu, chúng ta sẽ thấy khối bên trong được căn chỉnh theo chiều ngang chứ không phải theo chiều dọc:
http://jsfiddle.net/c1bgfffq/
Tại sao nó lại xảy ra? Vấn đề là thuộc tính căn chỉnh dọc ảnh hưởng đến việc căn chỉnh chính phần tử đó chứ không phải nội dung của nó(trừ khi nó được áp dụng cho các ô của bảng). Do đó, việc áp dụng thuộc tính này cho phần tử bên ngoài không tạo ra bất cứ thứ gì. Hơn nữa, việc áp dụng thuộc tính này cho một phần tử bên trong cũng sẽ không có tác dụng gì, vì các khối nội tuyến được căn chỉnh theo chiều dọc so với các khối liền kề và trong trường hợp của chúng ta, chúng ta có một khối nội tuyến.
Có một số kỹ thuật để giải quyết vấn đề này. Dưới đây chúng ta sẽ xem xét kỹ hơn về từng người trong số họ.
Căn chỉnh bằng bảng
Giải pháp đầu tiên bạn nghĩ đến là thay thế khối bên ngoài bằng một bảng gồm một ô. Trong trường hợp này, việc căn chỉnh sẽ được áp dụng cho nội dung của ô, tức là cho khối bên trong.
http://jsfiddle.net/c1bgfffq/1/
Nhược điểm rõ ràng của giải pháp này là, từ quan điểm ngữ nghĩa, việc sử dụng bảng để căn chỉnh là không chính xác. Nhược điểm thứ hai là việc tạo bảng yêu cầu thêm một phần tử khác xung quanh khối bên ngoài.
Điểm trừ đầu tiên có thể được loại bỏ một phần bằng cách thay thế thẻ table và td bằng div và thiết lập chế độ hiển thị bảng trong CSS.
.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Tuy nhiên, khối bên ngoài vẫn sẽ là một cái bàn với mọi hậu quả sau đó.
Căn chỉnh bằng cách sử dụng thụt lề
Nếu biết chiều cao của khối bên trong và bên ngoài, thì có thể đặt căn chỉnh bằng cách sử dụng thụt lề dọc của khối bên trong bằng công thức: (H bên ngoài – H bên trong) / 2.Bên ngoài ( chiều cao: 200px; ) . bên trong ( chiều cao: 100px; lề: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/
Nhược điểm của giải pháp này là nó chỉ được áp dụng trong một số trường hợp hạn chế khi đã biết chiều cao của cả hai khối.
Căn chỉnh bằng chiều cao dòng
Nếu bạn biết rằng khối bên trong không được chiếm nhiều hơn một dòng văn bản thì bạn có thể sử dụng thuộc tính line-height và đặt nó bằng chiều cao của khối bên ngoài. Vì nội dung của khối bên trong không được bao bọc ở dòng thứ hai nên bạn cũng nên thêm các quy tắc khoảng trắng: nowrap và tràn: ẩn.Bên ngoài ( chiều cao: 200px; chiều cao dòng: 200px; ) . bên trong ( khoảng trắng: nowrap; tràn: ẩn; )
http://jsfiddle.net/c1bgfffq/12/
Kỹ thuật này cũng có thể được sử dụng để căn chỉnh văn bản nhiều dòng nếu bạn xác định lại giá trị chiều cao dòng cho khối bên trong, đồng thời thêm các quy tắc display: inline-block và Vertical-align: middle.
Bên ngoài ( chiều cao: 200px; chiều cao dòng: 200px; ) .inner ( chiều cao dòng: bình thường; hiển thị: khối nội tuyến; căn chỉnh dọc: giữa; )
http://jsfiddle.net/c1bgfffq/15/
Nhược điểm của phương pháp này là phải biết chiều cao của khối bên ngoài.
Căn chỉnh bằng cách sử dụng "kéo dài"
Phương pháp này có thể được sử dụng khi chưa biết chiều cao của khối bên ngoài nhưng đã biết chiều cao của khối bên trong.Để làm điều này bạn cần:
- đặt vị trí tương đối cho khối bên ngoài và định vị tuyệt đối cho khối bên trong;
- thêm các quy tắc top: 0 và Bottom: 0 vào khối bên trong, do đó nó sẽ kéo dài đến toàn bộ chiều cao của khối bên ngoài;
- đặt phần đệm dọc của khối bên trong thành tự động.
http://jsfiddle.net/c1bgfffq/4/
Ý tưởng đằng sau kỹ thuật này là việc đặt chiều cao cho khối được kéo dài và được định vị tuyệt đối sẽ khiến trình duyệt tính toán phần đệm dọc theo tỷ lệ bằng nhau nếu nó được đặt thành auto .
Căn chỉnh với lề trên âm
Phương pháp này đã được biết đến rộng rãi và được sử dụng rất thường xuyên. Giống như cái trước, nó được sử dụng khi không biết chiều cao của khối bên ngoài nhưng đã biết chiều cao của khối bên trong.Bạn cần đặt khối bên ngoài thành vị trí tương đối và khối bên trong thành định vị tuyệt đối. Sau đó, bạn cần di chuyển khối bên trong xuống một nửa chiều cao của khối bên ngoài trên cùng: 50% và nâng nó lên một nửa chiều cao của chính nó lề-top: -H bên trong / 2.
Bên ngoài ( vị trí: tương đối; ) .inner ( chiều cao: 100px; vị trí: tuyệt đối; trên cùng: 50%; lề trên: -50px; )
http://jsfiddle.net/c1bgfffq/13/
Nhược điểm của phương pháp này là phải biết chiều cao của dàn lạnh.
Căn chỉnh với biến đổi
Phương pháp này tương tự như phương pháp trước nhưng có thể được sử dụng khi không xác định được độ cao của dàn lạnh. Trong trường hợp này, thay vì đặt khoảng đệm pixel âm, bạn có thể sử dụng thuộc tính biến đổi và di chuyển khối bên trong lên bằng cách sử dụng hàm dịchY và giá trị -50%.Bên ngoài ( vị trí: tương đối; ) . bên trong ( vị trí: tuyệt đối; trên cùng: 50%; biến đổi: dịchY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
Tại sao không thể đặt giá trị dưới dạng phần trăm trong phương pháp trước? Vì giá trị lề phần trăm được tính tương ứng với phần tử gốc nên giá trị 50% sẽ bằng một nửa chiều cao của hộp bên ngoài và chúng ta sẽ cần nâng hộp bên trong lên một nửa chiều cao của chính nó. Thuộc tính biến đổi là hoàn hảo cho việc này.
Nhược điểm của phương pháp này là không thể sử dụng nếu dàn lạnh có khả năng định vị tuyệt đối.
Căn chỉnh với Flexbox
Cách căn chỉnh dọc hiện đại nhất là sử dụng Flexbox (thường được gọi là Flexbox). Mô-đun này cho phép bạn kiểm soát linh hoạt vị trí của các thành phần trên trang, sắp xếp chúng ở hầu hết mọi nơi. Căn giữa cho Flexbox là một công việc rất đơn giản.Khối bên ngoài cần được đặt thành display: flex và khối bên trong thành Margin: auto . Và đó là tất cả! Đẹp chứ?
Bên ngoài ( hiển thị: flex; chiều rộng: 200px; chiều cao: 200px; ) . bên trong ( chiều rộng: 100px; lề: tự động; )
http://jsfiddle.net/c1bgfffq/14/
Nhược điểm của phương pháp này là Flexbox chỉ được hỗ trợ bởi các trình duyệt hiện đại.
Tôi nên chọn phương pháp nào?
Bạn cần bắt đầu từ tuyên bố vấn đề:- Để căn chỉnh văn bản theo chiều dọc, tốt hơn nên sử dụng thuộc tính thụt lề dọc hoặc thuộc tính line-height.
- Đối với các phần tử được định vị tuyệt đối với chiều cao đã biết (ví dụ: biểu tượng), phương pháp có thuộc tính lề trên âm là lý tưởng.
- Đối với các trường hợp phức tạp hơn, khi không xác định được chiều cao của khối, bạn cần sử dụng phần tử giả hoặc thuộc tính biến đổi.
- Chà, nếu bạn may mắn đến mức không cần hỗ trợ các phiên bản cũ hơn của trình duyệt IE, thì tất nhiên, tốt hơn hết bạn nên sử dụng Flexbox.
Căn giữa các phần tử theo chiều dọc bằng CSS là một nhiệm vụ gây khó khăn cho các nhà phát triển. Tuy nhiên, có một số phương pháp để giải quyết nó khá đơn giản. Bài học này trình bày 6 phương án căn giữa nội dung theo chiều dọc.
Hãy bắt đầu với một mô tả chung về vấn đề.
Vấn đề định tâm dọc
Định tâm theo chiều ngang rất đơn giản và dễ dàng. Khi phần tử ở giữa là nội tuyến, chúng ta sử dụng thuộc tính căn chỉnh tương ứng với phần tử cha. Khi phần tử ở cấp khối, chúng tôi đặt chiều rộng của nó và cài đặt tự động lề trái và phải.
Hầu hết mọi người, khi sử dụng thuộc tính text-align:, đều tham khảo thuộc tính Vertical-align để căn giữa theo chiều dọc. Mọi thứ trông khá logic. Nếu bạn đã sử dụng các mẫu bảng, có thể bạn đã sử dụng rộng rãi thuộc tính valign, điều này củng cố niềm tin rằng căn chỉnh dọc là cách đúng đắn để giải quyết vấn đề.
Nhưng thuộc tính valign chỉ hoạt động trên các ô của bảng. Và thuộc tính căn chỉnh dọc rất giống với nó. Nó cũng ảnh hưởng đến các ô của bảng và một số thành phần nội tuyến.
Giá trị của thuộc tính căn chỉnh dọc có liên quan đến phần tử nội tuyến gốc.
- Trong một dòng văn bản, căn chỉnh tương ứng với chiều cao của dòng.
- Ô trong bảng sử dụng căn chỉnh tương ứng với một giá trị được tính toán bằng thuật toán đặc biệt (thường là chiều cao của hàng).
Nhưng thật không may, thuộc tính căn chỉnh dọc không hoạt động trên các phần tử cấp khối (ví dụ: các đoạn văn bên trong phần tử div). Tình huống này có thể khiến người ta nghĩ rằng không có giải pháp nào cho vấn đề căn chỉnh theo chiều dọc.
Nhưng có các phương pháp khác để căn giữa các phần tử khối, việc lựa chọn phương pháp này phụ thuộc vào những gì đang được căn giữa so với vùng chứa bên ngoài.
Phương pháp chiều cao dòng
Phương pháp này hoạt động khi bạn muốn căn giữa một dòng văn bản theo chiều dọc. Tất cả những gì bạn phải làm là đặt chiều cao của dòng lớn hơn cỡ chữ.
Theo mặc định, khoảng trắng sẽ được phân bố đều ở đầu và cuối văn bản. Và dòng sẽ được căn giữa theo chiều dọc. Thông thường chiều cao của dòng được làm bằng chiều cao của phần tử.
HTML:
CSS:
#child ( chiều cao dòng: 200px; )
Phương pháp này hoạt động trên tất cả các trình duyệt, mặc dù nó chỉ có thể được sử dụng cho một dòng. Giá trị 200 px trong ví dụ được chọn tùy ý. Bạn có thể sử dụng bất kỳ giá trị nào lớn hơn kích thước phông chữ văn bản.
Căn giữa hình ảnh bằng chiều cao dòng
Nếu nội dung là hình ảnh thì sao? Phương pháp trên có hiệu quả không? Câu trả lời nằm ở một dòng mã CSS nữa.
HTML:
CSS:
#parent ( chiều cao dòng: 200px; ) #parent img ( căn chỉnh dọc: giữa; )
Giá trị của thuộc tính line-height phải lớn hơn chiều cao của hình ảnh.
Phương pháp bảng CSS
Ở trên đã đề cập rằng thuộc tính căn chỉnh dọc được sử dụng cho các ô của bảng, nơi nó hoạt động rất tốt. Chúng ta có thể hiển thị phần tử của mình dưới dạng ô bảng và sử dụng thuộc tính căn chỉnh dọc trên đó để căn giữa nội dung theo chiều dọc.
Ghi chú: Bảng CSS không giống với bảng HTML.
HTML:
CSS:
#parent (hiển thị: bảng;) #child ( hiển thị: ô bảng; căn dọc: giữa; )
Chúng tôi đặt đầu ra của bảng thành phần tử div cha và xuất phần tử div lồng nhau dưới dạng ô bảng. Bây giờ bạn có thể sử dụng thuộc tính căn chỉnh dọc trên vùng chứa bên trong. Mọi thứ trong đó sẽ được căn giữa theo chiều dọc.
Không giống như phương pháp trên, trong trường hợp này nội dung có thể động vì phần tử div sẽ thay đổi kích thước theo nội dung của nó.
Nhược điểm của phương pháp này là nó không hoạt động trong các phiên bản IE cũ hơn. Bạn phải sử dụng thuộc tính display: inline-block cho vùng chứa lồng nhau.
Định vị tuyệt đối và lề âm
Phương pháp này cũng hoạt động trong tất cả các trình duyệt. Nhưng nó yêu cầu phần tử được căn giữa phải có chiều cao.
Mã ví dụ thực hiện định tâm theo chiều ngang và chiều dọc cùng một lúc:
HTML:
CSS:
#parent (vị trí: tương đối;) #child ( vị trí: tuyệt đối; trên cùng: 50%; bên trái: 50%; chiều cao: 30%; chiều rộng: 50%; lề: -15% 0 0 -25%; )
Đầu tiên, chúng ta đặt loại định vị phần tử. Tiếp theo, chúng tôi đặt thuộc tính top và left của phần tử div lồng nhau thành 50%, tương ứng với tâm của phần tử cha. Nhưng chính giữa là góc trên cùng bên trái của phần tử lồng nhau. Do đó, bạn cần nâng nó lên (một nửa chiều cao) và di chuyển nó sang trái (một nửa chiều rộng), khi đó tâm sẽ trùng với tâm của phần tử gốc. Vì vậy việc biết chiều cao của phần tử trong trường hợp này là cần thiết. Sau đó, chúng ta đặt phần tử có lề trên và trái âm tương ứng bằng một nửa chiều cao và chiều rộng.
Phương pháp này không hoạt động trong tất cả các trình duyệt.
Định vị và kéo dài tuyệt đối
Mã ví dụ thực hiện định tâm theo chiều dọc và chiều ngang.
HTML:
CSS:
#parent (vị trí: tương đối;) #child ( vị trí: tuyệt đối; trên cùng: 0; dưới cùng: 0; trái: 0; phải: 0; chiều rộng: 50%; chiều cao: 30%; lề: tự động; )
Ý tưởng đằng sau phương pháp này là kéo dài phần tử lồng nhau đến cả 4 đường viền của phần tử cha bằng cách đặt các thuộc tính trên, dưới, phải và trái về 0.
Việc đặt lề để tự động tạo trên tất cả các cạnh sẽ đặt các giá trị bằng nhau ở cả 4 cạnh và căn giữa phần tử div lồng nhau của chúng ta trên phần tử gốc của nó.
Thật không may, phương pháp này không hoạt động trong IE7 trở xuống.
Không gian bên trên và bên dưới bằng nhau
Trong phương pháp này, phần đệm bằng nhau được đặt rõ ràng ở trên và dưới phần tử cha.
HTML:
CSS:
#parent ( đệm: 5% 0; ) #child ( đệm: 10% 0; )
Mã CSS mẫu đặt phần đệm trên và dưới cho cả hai phần tử. Đối với phần tử lồng nhau, việc đặt phần đệm sẽ giúp căn giữa phần tử đó theo chiều dọc. Và phần đệm của phần tử cha sẽ căn giữa phần tử lồng nhau bên trong nó.
Đơn vị đo lường tương đối được sử dụng để thay đổi kích thước các phần tử một cách linh hoạt. Và đối với các đơn vị đo lường tuyệt đối, bạn sẽ phải thực hiện các phép tính.
Ví dụ: nếu phần tử cha có chiều cao 400px và phần tử lồng nhau là 100px thì cần có khoảng đệm 150px ở trên cùng và dưới cùng.
150 + 150 + 100 = 400
Việc sử dụng % cho phép bạn để lại các phép tính cho trình duyệt.
Phương pháp này hoạt động ở mọi nơi. Nhược điểm là cần tính toán.
Ghi chú: Phương pháp này hoạt động bằng cách đặt phần đệm bên ngoài của một phần tử. Bạn cũng có thể sử dụng lề trong một phần tử. Việc quyết định sử dụng lề hay phần đệm phải được đưa ra tùy thuộc vào đặc thù của dự án.
div nổi
Phương thức này sử dụng phần tử div trống nổi và giúp kiểm soát vị trí của phần tử lồng nhau trong tài liệu. Lưu ý rằng div nổi được đặt trước phần tử lồng nhau của chúng ta trong mã HTML.
HTML:
CSS:
#parent (chiều cao: 250px;) #floater ( float: trái; chiều cao: 50%; chiều rộng: 100%; lề dưới: -50px; ) #child ( clear: cả hai; chiều cao: 100px; )
Chúng tôi dịch chuyển div trống sang trái hoặc phải và đặt chiều cao của nó thành 50% phần tử gốc của nó. Bằng cách này, nó sẽ lấp đầy nửa trên của phần tử gốc.
Vì div này nổi nên nó bị xóa khỏi luồng tài liệu thông thường và chúng ta cần mở văn bản trên phần tử lồng nhau. Ví dụ này sử dụng clear: cả hai , nhưng chỉ cần sử dụng cùng hướng với phần bù của phần tử div trống nổi là khá đủ.
Đường viền trên cùng của phần tử div lồng nhau nằm ngay bên dưới đường viền dưới cùng của phần tử div trống. Chúng ta cần di chuyển phần tử lồng nhau lên một nửa chiều cao của phần tử trống nổi. Để giải quyết vấn đề, hãy sử dụng giá trị thuộc tính lề dưới âm cho phần tử div trống nổi.
Phương pháp này cũng hoạt động trong tất cả các trình duyệt. Tuy nhiên, việc sử dụng nó đòi hỏi phải có thêm một phần tử div trống và kiến thức về chiều cao của phần tử lồng nhau.
Phần kết luận
Tất cả các phương pháp được mô tả đều dễ sử dụng. Khó khăn là không có cái nào phù hợp cho mọi trường hợp. Bạn cần phân tích dự án và chọn dự án phù hợp nhất với yêu cầu.
Vlad Merzhevich
Do nội dung của các ô trong bảng có thể được căn chỉnh đồng thời theo chiều ngang và chiều dọc, nên khả năng kiểm soát vị trí của các phần tử so với nhau được mở rộng. Bảng cho phép bạn đặt căn chỉnh hình ảnh, văn bản, trường biểu mẫu và các thành phần khác có liên quan với nhau và toàn bộ trang web. Nhìn chung, việc căn chỉnh chủ yếu là cần thiết để thiết lập các kết nối trực quan giữa các yếu tố khác nhau cũng như để nhóm chúng lại với nhau.
Định tâm dọc
Một cách để cho khách truy cập thấy trọng tâm và tên của trang web là sử dụng trang giật gân. Đây là trang đầu tiên, theo quy định, có màn hình giật gân flash hoặc hình ảnh thể hiện ý chính của trang web. Hình ảnh cũng là một liên kết đến các phần khác của trang web. Bạn cần đặt hình ảnh này vào giữa cửa sổ trình duyệt, bất kể độ phân giải màn hình. Với mục đích này, bạn có thể sử dụng bảng có chiều rộng và chiều cao 100% (ví dụ 1).
Ví dụ 1: Căn giữa bản vẽ
|
Trong ví dụ này, căn chỉnh theo chiều ngang được đặt bằng tham số thẻ Align="center"
Để đặt chiều cao của bảng thành 100%, bạn cần xóa, mã không còn hiệu lực.
Việc sử dụng chiều rộng và chiều cao để bao phủ toàn bộ khu vực có sẵn của trang web đảm bảo rằng nội dung của bảng sẽ được căn chỉnh chính xác ở giữa cửa sổ trình duyệt, bất kể kích thước của nó.
Căn chỉnh theo chiều ngang
Bằng cách kết hợp các thuộc tính căn chỉnh (căn chỉnh ngang) và valign (căn chỉnh dọc) của thẻ
Chúng ta hãy xem một số ví dụ về căn chỉnh văn bản theo hình bên dưới.
Căn chỉnh trên cùng
Để chỉ định căn chỉnh trên cùng của nội dung ô cho một thẻ
Ví dụ 2: Sử dụng valign
| Cột 1 | Cột 2 |
Trong ví dụ này, các đặc điểm của ô được kiểm soát bằng các tham số thẻ
Ví dụ 3: Áp dụng kiểu để căn chỉnh
| Cột 1 | Cột 2 |
Để rút ngắn mã, ví dụ này sử dụng nhóm các bộ chọn vì thuộc tính căn dọc và đệm được áp dụng cho hai ô cùng một lúc.
Căn chỉnh dưới cùng được thực hiện theo cách tương tự, nhưng thay vì giá trị trên cùng, đáy được sử dụng.
Căn giữa
Theo mặc định, nội dung ô được căn chỉnh về giữa đường thẳng đứng của chúng, vì vậy nếu các cột có độ cao khác nhau, bạn cần đặt căn chỉnh về cạnh trên. Đôi khi bạn vẫn cần phải để lại phương pháp căn chỉnh ban đầu, chẳng hạn như khi đặt công thức, như trong Hình. 2.
Trong trường hợp này, công thức nằm ngay chính giữa cửa sổ trình duyệt và số của nó nằm ở cạnh phải. Để sắp xếp các phần tử theo cách này, bạn sẽ cần một bảng có ba ô. Các ô bên ngoài phải có cùng kích thước, ở ô giữa căn chỉnh được căn giữa và ở ô bên phải - dọc theo cạnh phải (ví dụ 4). Số lượng ô này là cần thiết để đảm bảo rằng công thức được đặt ở giữa.
Ví dụ 4: Căn chỉnh công thức
 |
(18.6) |
Trong ví dụ này, ô đầu tiên của bảng được để trống; nó chỉ dùng để tạo thụt lề, nhân tiện, cũng có thể được đặt bằng cách sử dụng kiểu.
Căn chỉnh các phần tử biểu mẫu
Việc sử dụng bảng sẽ thuận tiện cho việc xác định vị trí của các trường biểu mẫu, đặc biệt khi chúng xen kẽ với văn bản. Một trong những tùy chọn thiết kế cho biểu mẫu dùng để nhập nhận xét được hiển thị trong Hình. 3.
Để đảm bảo rằng văn bản bên cạnh các trường biểu mẫu được căn phải và bản thân các thành phần của biểu mẫu được căn trái, bạn sẽ cần một bảng có đường viền vô hình và hai cột. Cột bên trái sẽ chứa chính văn bản đó và cột bên phải sẽ chứa các trường văn bản (ví dụ 5).
Ví dụ 5: Căn chỉnh các trường biểu mẫu
Trong ví dụ này, đối với những ô cần căn phải, thuộc tínhalign="right" sẽ được thêm vào. Để đảm bảo rằng nhãn Nhận xét được đặt ở đầu văn bản nhiều dòng, ô tương ứng được đặt thành căn chỉnh trên cùng bằng thuộc tính valign.
Nhiệm vụ rất thường xuyên là căn chỉnh một khối ở giữa trang / màn hình và thậm chí sao cho không có tập lệnh Java, không đặt kích thước cố định hoặc thụt lề âm và để thanh cuộn hoạt động cho phần gốc nếu khối vượt quá kích thước của nó . Có khá nhiều ví dụ đơn điệu trên Internet về cách căn chỉnh một khối vào giữa màn hình. Theo quy định, hầu hết chúng đều dựa trên các nguyên tắc giống nhau.
Dưới đây là những cách chính để giải quyết vấn đề, ưu và nhược điểm của chúng. Để hiểu bản chất của các ví dụ, tôi khuyên bạn nên giảm chiều cao/chiều rộng của cửa sổ Kết quả trong các ví dụ tại các liên kết được cung cấp.
Tùy chọn 1: Thụt lề âm.
Định vị khối sử dụng 50% thuộc tính trên cùng và bên trái, đồng thời biết trước chiều cao và chiều rộng của khối, đặt lề âm, bằng một nửa kích thước khối. Một nhược điểm rất lớn của tùy chọn này là bạn cần đếm số lần thụt lề âm. Cũng khối không hoạt động hoàn toàn chính xác khi được bao quanh bởi các thanh cuộn - nó chỉ đơn giản là bị cắt đi vì nó có lề âm.
Cha mẹ ( chiều rộng: 100%; chiều cao: 100%; vị trí: tuyệt đối; trên cùng: 0; trái: 0; tràn: tự động; ) .block ( chiều rộng: 250px; chiều cao: 250px; vị trí: tuyệt đối; trên cùng: 50%; trái : 50%; lề: -125px 0 0 -125px; img ( chiều rộng tối đa: 100%; chiều cao: tự động; hiển thị: khối; lề: 0 tự động; đường viền: không; ) )
Tùy chọn 2. Thụt lề tự động.
Ít phổ biến hơn, nhưng tương tự như lần đầu tiên. Vì khối chúng tôi đặt chiều rộng và chiều cao, định vị các thuộc tính trên cùng bên phải dưới cùng bên trái thành 0 và đặt lề tự động. Ưu điểm của tùy chọn này là thanh cuộn hoạt động cha mẹ, nếu cái sau có chiều rộng và chiều cao 100%. Nhược điểm của phương pháp này là việc thiết lập kích thước cứng nhắc.
Cha mẹ ( chiều rộng: 100%; chiều cao: 100%; vị trí: tuyệt đối; trên cùng: 0; trái: 0; tràn: tự động; ) .block ( chiều rộng: 250px; chiều cao: 250px; vị trí: tuyệt đối; trên cùng: 0; phải: 0; dưới cùng: 0; trái: 0; lề: tự động; img ( max-width: 100%; chiều cao: tự động; hiển thị: khối; lề: 0 tự động; đường viền: không có; ) )
Tùy chọn 3. Bảng.
Thử hỏi xem sao cha mẹ kiểu bảng, ô cha mẹĐặt căn chỉnh văn bản ở giữa. MỘT khối chúng tôi thiết lập mô hình khối dòng. Nhược điểm mà chúng tôi gặp phải là thanh cuộn không hoạt động và nhìn chung tính thẩm mỹ khi “mô phỏng” bảng cũng không.
Cha mẹ ( chiều rộng: 100%; chiều cao: 100%; hiển thị: bảng; vị trí: tuyệt đối; trên cùng: 0; trái: 0; > .inner ( hiển thị: ô bảng; căn chỉnh văn bản: giữa; căn chỉnh dọc: giữa; ) ) .block ( display: inline-block; img ( display: block; border: none; ) )
Để thêm cuộn vào ví dụ này, bạn sẽ phải thêm một yếu tố nữa vào thiết kế.
Ví dụ: jsfiddle.net/serdidg/fk5nqh52/3.
Tùy chọn 4. Phần tử giả.
Tùy chọn này không có tất cả các vấn đề được liệt kê trong các phương pháp trước đó và cũng giải quyết được các vấn đề ban đầu. Vấn đề là ở chỗ cha mẹ thiết lập phong cách phần tử giả trước đây, cụ thể là mô hình chiều cao 100%, căn giữa và khối nội tuyến. Nó cũng tương tự với khối một mô hình khối dòng được đặt, căn giữa. ĐẾN khối không "rơi" vào phần tử giả, khi kích thước của cái thứ nhất lớn hơn cha mẹ, biểu thị cha mẹ khoảng trắng: nowrap và cỡ chữ: 0, sau đó khối hủy các kiểu này bằng cách sau - khoảng trắng: bình thường. Trong ví dụ này, cần có font-size: 0 để xóa khoảng trắng kết quả giữa cha mẹ Và khối do định dạng mã. Khoảng trống có thể được loại bỏ theo những cách khác, nhưng tốt nhất bạn nên tránh nó.
Cha mẹ ( chiều rộng: 100%; chiều cao: 100%; vị trí: tuyệt đối; trên cùng: 0; trái: 0; tràn: tự động; khoảng trắng: nowrap; căn chỉnh văn bản: giữa; cỡ chữ: 0; &: trước ( chiều cao: 100%; hiển thị: khối nội tuyến; căn chỉnh dọc: giữa; nội dung: ""; ) .block ( display: inline-block; khoảng trắng: bình thường; căn chỉnh dọc: giữa; căn chỉnh văn bản: trái ; img (hiển thị: khối; đường viền: không có; ) )
Hoặc, nếu bạn cần phần gốc chỉ chiếm chiều cao và chiều rộng của cửa sổ chứ không phải toàn bộ trang:
Cha mẹ ( vị trí: cố định; trên cùng: 0; phải: 0; dưới cùng: 0; trái: 0; tràn: tự động; khoảng trắng: nowrap; căn chỉnh văn bản: giữa; cỡ chữ: 0; &: trước ( chiều cao: 100%; hiển thị: khối nội tuyến; căn chỉnh dọc: giữa; nội dung: ""; ) .block ( display: khối nội tuyến; khoảng trắng: bình thường; căn chỉnh dọc: giữa; căn chỉnh văn bản: trái; img ( hiển thị: khối; đường viền: không có; ) )
Tùy chọn 5. Flexbox.
Một trong những cách đơn giản và tinh tế nhất là sử dụng flexbox. Nó không yêu cầu những chuyển động cơ thể không cần thiết, mô tả khá rõ ràng bản chất của những gì đang xảy ra và có tính linh hoạt cao. Điều duy nhất đáng ghi nhớ khi chọn phương pháp này là hỗ trợ cho IE từ phiên bản 10 trở đi. caniuse.com/#feat=flexbox
Cha mẹ ( chiều rộng: 100%; chiều cao: 100%; vị trí: cố định; trên cùng: 0; trái: 0; hiển thị: flex; căn chỉnh các mục: giữa; căn chỉnh nội dung: giữa; biện minh-nội dung: giữa; tràn: tự động; ) .block ( nền: #60a839; img ( display: block; border: none; ) )
Tùy chọn 6. Chuyển đổi.
Phù hợp nếu chúng ta bị giới hạn bởi cấu trúc và không có cách nào để thao tác với phần tử gốc nhưng khối cần được căn chỉnh bằng cách nào đó. Hàm css dịch() sẽ có tác dụng giải cứu. Giá trị định vị tuyệt đối 50% sẽ định vị chính xác góc trên cùng bên trái của khối ở giữa, sau đó giá trị dịch âm sẽ di chuyển khối so với kích thước của chính nó. Xin lưu ý rằng các hiệu ứng tiêu cực có thể xuất hiện dưới dạng các cạnh mờ hoặc kiểu phông chữ. Ngoài ra, phương pháp này có thể dẫn đến các vấn đề khi tính toán vị trí của khối bằng java-script.Đôi khi, để bù đắp cho việc mất 50% chiều rộng do sử dụng thuộc tính CSS left, quy tắc được chỉ định cho khối có thể trợ giúp: lề phải: -50%; .
Cha mẹ ( chiều rộng: 100%; chiều cao: 100%; vị trí: cố định; trên cùng: 0; trái: 0; tràn: tự động; ) .block ( vị trí: tuyệt đối; trên cùng: 50%; trái: 50%; biến đổi: dịch( -50%, -50%); img ( hiển thị: khối; ) )
Tùy chọn 7. Nút.
Tùy chọn azproduction của người dùng ở đâu khốiđóng khung trong một thẻ nút. Nút này có đặc tính căn giữa mọi thứ bên trong nó, cụ thể là các phần tử của mô hình nội tuyến và mô hình khối (khối nội tuyến). Trong thực tế tôi không khuyên bạn nên sử dụng nó.
Cha mẹ ( chiều rộng: 100%; chiều cao: 100%; vị trí: tuyệt đối; trên cùng: 0; trái: 0; tràn: tự động; nền: không; viền: không có; phác thảo: không có;) .block ( hiển thị: khối nội tuyến; img (hiển thị: khối;; đường viền: không có; ) )
Thưởng
Sử dụng ý tưởng của tùy chọn thứ 4, bạn có thể đặt lề ngoài cho khối và cái sau sẽ được hiển thị đầy đủ được bao quanh bởi các thanh cuộn.Ví dụ: jsfiddle.net/serdidg/nfqg9rza/2.
Bạn cũng có thể căn chỉnh hình ảnh vào giữa và nếu hình ảnh lớn hơn cha mẹ, chia tỷ lệ theo kích thước cha mẹ.
Ví dụ: jsfiddle.net/serdidg/nfqg9rza/3.
Ví dụ với một bức tranh lớn:
