Có thể căn giữa phần tử khối nội tuyến và nếu có, làm thế nào?

Question

Tôi có một phần tử có chiều rộng không xác định ban đầu, cụ thể là phương trình MathJax do người dùng cung cấp. Tôi có phần tử được đặt làm khối nội tuyến để đảm bảo rằng chiều rộng của phần tử phù hợp với nội dung của nó và do đó nó có chiều rộng được xác định. Tuy nhiên, điều này ngăn cản các phương pháp tập trung truyền thống. Đó là, sau đây không làm việc:

.equationElement 
{ 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
} 

Và giải pháp không thể là:

.equationElement 
{ 
    display: block; 
    width: 100px; 
    margin-left: auto; 
    margin-right: auto; 
} 

Bởi vì tôi không có ý tưởng gì chiều rộng thực sự cần được trước và nếu người dùng nhấp vào phương trình, Tôi cần toàn bộ phương trình được đánh dấu, vì vậy tôi không thể thiết lập chiều rộng là 0. Có ai có một giải pháp để tập trung phương trình này?

Answer 1

Chỉ cần đặt text-align: center; trên vùng chứa.

Here's a demo.

Answer 2

Một cách khác để làm điều này (chỉ hoạt động cho các phần tử khối cũng):

.center-horizontal { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
} 

Giải thích: trái: 50% sẽ xác định vị trí các yếu tố bắt đầu từ trung tâm của chứa phụ huynh, do đó bạn muốn kéo nó trở lại bằng một nửa chiều rộng của nó với biến đổi: translateX (-50%)

Lưu ý1: Đảm bảo đặt vị trí của cha mẹ thành vị trí: tương đối; nếu phụ huynh là hoàn toàn vị trí đặt một chiều rộng 100% và chiều cao, 0 padding và div lề bên trong nó và cung cấp cho nó position: relative

Note2: Cũng có thể được sửa đổi cho dọc trung với

top:50%; 
transform: translateY(-50%); 

Answer 3

Một chút muộn, nhưng tương tự như câu trả lời Ivek, bạn có thể tránh sử dụng tờ khai position bằng cách sử dụng margin-left hơn left, vì vậy:

margin-left: 50%; transform: translateX(-50%);