Chính xác văn bản trung tâm theo chiều dọc trong một hộp

Có một quy tắc chính tắc làm thế nào để trung tâm văn bản theo chiều dọc trong một hộp? Hay nói cách khác, làm thế nào để căn chỉnh một hộp xung quanh văn bản? Tôi có thể tưởng tượng ba tùy chọn dựa trên số liệu chính tả (xem minh họa không chính xác của tôi):

• Căn trên giữa chiều cao x
• Căn trên giữa chiều cao nắp (" đường trung bình ")
• Căn trên giữa nắp + chiều cao giảm dần

Tôi hầu hết là một lập trình viên, nhưng tôi thường phải làm điều này, và muốn biết liệu có một quy tắc chung nào không, hoặc nếu các nhà thiết kế của bạn làm đúng như bạn thấy phù hợp. Tôi thích các liên kết đến sách thiết kế đồ họa thay vì ý kiến ​​cá nhân.

Câu hỏi hay!

Tôi thực sự thích và đồng ý với các câu trả lời cho đến nay. Câu trả lời của tôi tập trung nhiều vào kỹ thuật thực dụng hơn là lý luận khoa học hay toán học. : D

Như đã nói, sở thích của tôi là sử dụng đường cơ sở và chiều cao x (xem phần Điều khoản loại bên dưới) làm điểm bắt đầu cho các dòng trên cùng và dưới cùng của hộp của tôi. Hy vọng rằng GIF này sẽ giúp giải thích:

Khi tôi nhận được đường dẫn thẳng hàng với đường cơ sở hoặc chiều cao x, sau đó tôi sử dụng các phím SHIFT+ UPhoặc DOWNmũi tên để tạo phần đệm trực quan (theo mặc định, trong Photoshop, mỗi gia số là 10px, vì vậy, trong ví dụ trên, tôi đã thêm phần 40pxđệm ở trên và phía dưới).

Trong ví dụ này, bạn có thể thấy công cụ căn chỉnh sẽ làm gì nếu tôi lấy cùng một hộp / văn bản và thực hiện một Trung tâm dọc Align dọc (văn bản màu đỏ là kết quả của việc sử dụng công cụ căn chỉnh):

Như bạn có thể thấy, nó khá gần ( 2pxkhác biệt).

Để tóm tắt / kết luận:

Kỹ thuật tôi sử dụng:

1. Căn chỉnh các đường dẫn trên / dưới của hộp tương ứng với chiều cao x / đường cơ sở tương ứng (và sau đó SHIFTcác phím mũi tên hướng ra ngoài để đệm trực quan.
2. Tương tự, đôi khi tôi sẽ mũi tên phím văn bản lên và xuống cho đến khi đường cơ sở và chiều cao x đáp ứng các đường viền dưới cùng và trên cùng của hộp; từ đó, tôi sẽ đếm các pixel và sau đó trải đều phần còn lại giữa hai hướng khi tôi căn giữa văn bản.
3. Chọn cả hộp và văn bản, sau đó thực hiện một Trung tâm dọc Align và trung tâm ngang Align.
4. Cuối cùng, có những lúc tôi cầu mắt vị trí. Thông thường, tôi đi lên so với xuống dưới để tránh hình ảnh trực quan (điều này liên quan đến việc tạo khung hình, xem phần Khung hình bên dưới); Điều này đặc biệt đúng nếu kích thước phông chữ là chiều cao số lẻ và độ 1pxlệch là phần còn lại tôi sẽ chuyển văn bản 1px(hoặc nhiều hơn) lên trên thay vì xuống dưới.

Khung hình

Thảm được sử dụng phổ biến nhất có lề bằng nhau trên tất cả các cách. Trên tác phẩm nghệ thuật với trung tâm thị giác thấp hơn trung tâm thực tế, [8] Trọng lượng dưới cùng, hoặc bộ ngoài được sử dụng thường xuyên trong thảm. Lề dưới được làm lớn hơn lề bên và lề trên. Khi nhìn vào một hình ảnh, đôi mắt có xu hướng tập trung cao hơn so với trung tâm vật lý của hình ảnh. Bằng cách tạo lề dưới lớn hơn và tắt thiết lập, bạn vẽ mắt vào trung tâm vật lý của hình ảnh. Trung tâm hàng đầu là một tập hợp con của trọng số đáy trong đó lề trên và cạnh bên bằng nhau, tạo ra hiệu ứng trực quan dễ chịu. Điều này đặc biệt đúng trong các tấm thảm nơi các đường viền không bằng nhau, chẳng hạn như 11x14 với lỗ mở 8x10.
- WikiPedia: Mat (đóng khung ảnh)

… và đây:

Thảm được 'cân' ở phía dưới vì mắt / não của chúng ta cảm thấy lực hấp dẫn. Nếu một tấm thảm có cùng chiều rộng xung quanh, não của chúng ta sẽ 'đăng ký' phần dưới hẹp hơn một chút (hình ảnh không được căn giữa trực quan trong tấm thảm)
- WetCanvas> Trung tâm Kiến thức> Mẹo và Đóng khung> Thảo luận về khung Tải lại trang này đáy của tấm thảm

Điều khoản loại

- https://www.supremo.tv/typeterms/

TẶNG KEM!

Đây là một GIF so sánh chiều cao giới hạn, giảm dần, tăng dần với tất cả các chữ thường không có giảm dần / tăng dần:

Tôi nghĩ rằng cả hai phiên bản xếp hàng khá độc đáo trong hộp.

Trọng lượng hình ảnh rất năng động đến nỗi nó thực sự không thể bị quy định bởi x-height, cap height, v.v ...

Một số yếu tố trong thiết kế của bạn có thể kéo mắt theo một hướng so với hướng khác mặc dù về mặt toán học là "trung tâm", từ bên trái sang bên phải so với khung vẽ, chẳng hạn.

"Trung tâm thị giác" là nơi tất cả các yếu tố trọng lượng được cân bằng trực quan mặc dù không nằm trong trung tâm chính xác.

Bạn có thể muốn thử trải nghiệm với công cụ này: http://javier.xyz/visual-center/

Thiết kế không phải lúc nào cũng là một khoa học chính xác. Thường thì những gì có vẻ đúng, có thể không phải là trung tâm thực sự hoặc những gì là chính xác về mặt toán học.

Cụ thể, trong câu hỏi của bạn, nó sẽ phụ thuộc vào sự thăng thiên và hậu duệ trong văn bản để xác định tốt nhất sự liên kết quang học. Nếu không có con cháu hoặc con cháu, sự liên kết lý tưởng có thể thay đổi. Trong ví dụ của bạn, số ba có vẻ là sự lựa chọn tốt nhất bởi vì có cả người lên và người xuống và tập trung vào họ trông đẹp mắt nhất.