Vị trí trung tâm với flexbox trong nội dung có thể chỉnh sửa

Question

Thử nghiệm trên OSX Chrome 45, align-items: center; đang hoạt động cho nội dung, nhưng nếu bạn nhấp vào vùng trống có thể chỉnh sửa bên dưới, vị trí dấu mũ sẽ không được căn giữa cho đến khi bạn bắt đầu nhập.

Cách duy nhất để khắc phục vấn đề này với đệm cân bằng trên cùng/dưới cùng hoặc có cách nào để làm việc này mà không cần di chuyển pixel? Cảm ơn

[contenteditable="true"] { 
 
    border: 1px solid #ddd; 
 
    display: flex; 
 
    align-items: center; 
 
    min-height: 46px; 
 
} 
 

 
[contenteditable="true"]:focus { 
 
    outline: none; 
 
}

<div contenteditable="true"></div> 
 
<div contenteditable="true">content is centered, but caret isn't</div>

Answer 1

Như James Donnelly cho biết trong các bình luận, bạn có thể thử thêm line-height quy tắc của bạn, ví dụ:

[contenteditable="true"] { 
    border: 1px solid #ddd; 
    display: flex; 
    align-items: center; 
    min-height: 46px; 
    line-height: 46px; 
} 

Tuy nhiên tôi muốn thực sự có thể đi với Thay vào đó, hãy thay vào đó, padding. Thêm min-height vào phần tử contenteditable của bạn là nguyên nhân gây ra vấn đề giữa con trỏ và giá trị được nhập. Lấy đi min-height và sự cố được giải quyết. Sau đó, vấn đề của bạn sẽ trở thành "Làm cách nào để thêm một khoảng không gian xung quanh thành phần contenteditable này?" - và đó chính xác là những gì đệm cho :)

Vì vậy, có lẽ một cái gì đó giống như:

[contenteditable="true"] { 
    border: 1px solid #ddd; 
    display: flex; 
    align-items: center; 
    padding: 15px 0; 
} 

Phụ thuộc vào những gì chính xác bạn đang cố gắng để thực hiện mặc dù, và cho dù bạn thực sự cần phải sửa chữa chiều cao của div.