I write a flexbox css style of appbar, but the layout is a bit weird in Chinese pattern on webkit.
The place highlight green background color is a flexbox div.
.green-background-color-div`
display: flex;
flex: 1;
flex-direction: row;
align-items: center;
background-color: green;
`;
And the text is a textField's placeholder, the css of this textField.
.textField`
width: 100%;
height: 100%;
padding: 0;
margin: 0;
caret-color: gray;
font-size: 18px;
border: none;
outline: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: transparent;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
&::-webkit-search-cancel-button {
display: none;
}
`;
There is no problem with common text.
How should I adjust my code to center Chinese like in Chrome?
Use line height In CSS
.textField{
line-height:26px;
}
26px is an assumption. You can increase based on your design.