Căn chỉnh trung tâm chặn nội tuyến

Question

Cách dễ nhất để căn giữa căn chỉnh phần tử khối nội tuyến là gì?

Lý tưởng nhất là tôi không muốn đặt chiều rộng thành các phần tử. Bằng cách này, tùy thuộc vào văn bản được nhập trong các phần tử, phần tử inline-block sẽ mở rộng đến chiều rộng mới mà không phải thay đổi chiều rộng trong CSS. Các phần tử khối nội tuyến phải được căn giữa trên đầu trang của nhau (không phải cạnh nhau), cũng như văn bản trong phần tử.

Xem mã bên dưới hoặc xem trên jsFiddle.

HTML hiện:

<div> 
    <h2>Hello, John Doe.</h2> 
    <h2>Welcome and have a wonderful day.</h2> 
</div> 

Các SCSS hiện tại:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600); 

body { 
    margin: 0 auto; 
    background: rgba(51,51,51,1); 
    font-family: 'Open Sans', sans-serif; 
} 

div { 
    width: 100%; 
    height: auto; 
    margin: 15% 0; 
    text-align: center; 
    h2 { 
     margin: 0 auto; 
     padding: 10px; 
     text-align: center; 
     float: left; 
     clear: left; 
     display: inline-block; 
     &:first-child { 
      color: black; 
      background: rgba(255,255,255,1); 
     } 
     &:last-child { 
      color: white; 
      background: rgba(117,80,161,1); 
     } 
    } 
} 

Thêm BR giữa hai yếu tố và đưa ra khỏi float: trái/rõ ràng: trái có thể là cách đơn giản nhất; Tuy nhiên, tôi đã tò mò nếu có một cách khác đi về điều này.

Answer 1

Như thế này? http://jsfiddle.net/bcL023ko/3/ Xóa float:left sang trái và thêm margin: 0 auto để căn giữa phần tử. Hay nó là cái gì khác mà bạn đang tìm kiếm?