Menu
i don't understand why seems impossible to center vertically inside a container elements as headings , paragraph , span .. using some typefaces in Chrome for mobile.Seems to work better in Firefox for mobile instead. An example : Open-Sans works both on Firefox mobile and Chrome Mobile.Center vertically using font family Raleway , for example , seems possible with Firefox mobile only.
#x-wrapper {
position:absolute;
left:100px;
font-family:'Open Sans',sans-serif;font-weight:400;
}
#y-wrapper {
position:absolute;
left:200px;
font-family:'Oswald',sans-serif;font-weight:400;
}
.circle {
width:50px;
height:50px;
border:1px black solid;
border-radius:25px;
}
.hello{
position:relative;
height:100%;
width:100%;
}
.hello h5 {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
margin:0px;<!DOCTYPE html>
<head>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="x-wrapper" class="circle">
<div class="hello">
<h5>hello</h5>
</div>
</div>
<div id="y-wrapper" class="circle">
<div class="hello">
<h5>hello</h5>
</div>
</div>
</body>
</html>
813
I would comment to ask questions, but not enough rep yet :/
Have you tried something like this:
.circle {
display: flex;
align-items: center;
justify-content: center;
}
using flexbox, they can be very useful when trying to vertically align text elements. Flexbox is also compatibly with most browsers: link
86
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
