Vertical centering in Android

I used flexbox, table and vertical-align to try to resolve it, but it doesn't have any effect.

vertical-align

You can see the screenshot below. Android's doesn't align middle (the font-size less than 12px) but iOS it work fine...

font-size

Remove line-height

set line-height: normal, upper's spacing is less then bottom...

line-height: normal

Android

iOS

.tags
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 -5px;
padding-top: 10px;

.tag
flex: 0 0 25%;
min-width: 0;

.tag .caption
position: relative;
display: block;
height: 20px;
line-height: 20px;
margin: 5px;
font-size: 10px;
color: #82879b;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

.tag .caption:after
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 200%;
height: 200%;
border: 1px solid #82879b;
border-radius: 20px;
transform-origin: 0 0;
transform: scale(.5);
box-sizing: border-box;


<h2> English </h2>

<div class="tags">
<div class="tag"><span class="caption">You</span></div>
<div class="tag"><span class="caption">see</span></div>
<div class="tag"><span class="caption">it's</span></div>
<div class="tag"><span class="caption">in android</span></div>
</div>

<h2> Chinese </h2>

<div class="tags">
<div class="tag"><span class="caption">中</span></div>
<div class="tag"><span class="caption">文</span></div>
<div class="tag"><span class="caption">对</span></div>
<div class="tag"><span class="caption">齐</span></div>
</div>

<h2> Japanese </h2>

<div class="tags">
<div class="tag"><span class="caption">エネルギッシュな</span></div>
<div class="tag"><span class="caption">サニー</span></div>
<div class="tag"><span class="caption">ハロー</span></div>
<div class="tag"><span class="caption">ばか</span></div>
</div>

font-size

1 Answer
1

I think you can center the text in Android, and everywhere else, with much less code.

Here's a simplified version:

.tags
display: flex;
flex-wrap: wrap;
justify-content: space-around;

.tag
flex: 0 0 23%;
min-width: 0;
height: 35px;
border-radius: 35px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;

.tag .caption
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;


<div class="tags">
<div class="tag"><span class="caption">this</span></div>
<div class="tag"><span class="caption">should</span></div>
<div class="tag"><span class="caption">be centered</span></div>
<div class="tag"><span class="caption">in android</span></div>
</div>

font-size

padding

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.