This is a multi-part message in MIME format.
On 13/03/2020 01:18, Andrew Poulos wrote:
I have this HTML
<a href="foo.html">↶</a>
with this CSS
a {
box-sizing: border-box;
font-size:28px;
font-weight:bold;
text-decoration: none;
display:block;
width:40px;
height:40px;
text-align:center;
}
Firefox displays the left curving arrow (↶) vertically centred
in the anchor. Whereas Chrome has it about 6 pixels too high.
Is it the nature of the unicode character or is there something I can
do to get it to centre vertically in all browsers?
Andrew Poulos
Use this css:
a {
box-sizing: border-box;
font-size: 28px;
font-weight: bold;
text-decoration: none;
width: 100px;
height: 100px;
text-align: center;
border: 2px solid red;
display: flex;
align-items: center;
justify-content: center;
}
--
With over 1.2 billion devices now running Windows 10, customer
satisfaction is higher than any previous version of windows.
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body bgcolor="#FFFFE0" text="#006600">
<div class="moz-cite-prefix">On 13/03/2020 01:18, Andrew Poulos
wrote:<br>
</div>
<blockquote
cite="mid:
ZLidnUBfr6T5QvfDnZ2dnUU7-cfNnZ2d@westnet.com.au"
type="cite">I have this HTML
<br>
<br>
<a href="foo.html">&#8630;</a>
<br>
<br>
with this CSS
<br>
<br>
a {
<br>
 box-sizing: border-box;
<br>
 font-size:28px;
<br>
 font-weight:bold;
<br>
 text-decoration: none;
<br>
 display:block;
<br>
 width:40px;
<br>
 height:40px;
<br>
 text-align:center;
<br>
}
<br>
<br>
Firefox displays the left curving arrow (&#8630;) vertically
centred in the anchor. Whereas Chrome has it about 6 pixels too
high.
<br>
<br>
Is it the nature of the unicode character or is there something I
can do to get it to centre vertically in all browsers?
<br>
<br>
Andrew Poulos
<br>
</blockquote>
<br>
<br>
Use this css:<br>
<br>
<blockquote type="cite">
<div style="color: #d4d4d4;background-color: #1e1e1e;font-family: Consolas, 'Courier New', monospace;font-weight: normal;font-size: 14px;line-height: 19px;white-space: pre;"><div><span style="color: #d4d4d4;">Â </span><span style="color: #d7ba7d;">
a</span><span style="color: #d4d4d4;">Â {</span></div><div><span style="color: #d4d4d4;">Â Â Â Â Â Â Â Â Â Â Â Â </span><span style="color: #9cdcfe;">box-sizing</span><span style="color: #d4d4d4;">:Â border-box;</span></div><div><span style="color: #
d4d4d4;">Â Â Â Â Â Â Â Â Â Â Â Â </span><span style="color: #9cdcfe;">font-size</span><span style="color: #d4d4d4;">:Â </span><span style="color: #b5cea8;">28px</span><span style="color: #d4d4d4;">;</span></div><div><span style="color: #d4d4d4;">Â Â Â Â Â
       </span><span style="color: #9cdcfe;">font-weight</span><span style="color: #d4d4d4;">: bold;</span></div><div><span style="color: #d4d4d4;">            </span><span style="color: #9cdcfe;">text-decoration</span
<span style="color: #d4d4d4;">:Â none;</span></div><div><span style="color: #d4d4d4;">Â Â Â Â Â Â Â Â Â Â Â Â </span><span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">:Â </span><span style="color: #b5cea8;">100px</span><span style="
color: #d4d4d4;">;</span></div><div><span style="color: #d4d4d4;">Â Â Â Â Â Â Â Â Â Â Â Â </span><span style="color: #9cdcfe;">height</span><span style="color: #d4d4d4;">:Â </span><span style="color: #b5cea8;">100px</span><span style="color: #d4d4d4;">;</
span></div><div><span style="color: #d4d4d4;">Â Â Â Â Â Â Â Â Â Â Â Â </span><span style="color: #9cdcfe;">text-align</span><span style="color: #d4d4d4;">:Â center;</span></div><div><span style="color: #d4d4d4;">Â Â Â Â Â Â Â Â Â Â Â Â </span><span style=
"color: #9cdcfe;">border</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">2px</span><span style="color: #d4d4d4;"> solid red;</span></div><div><span style="color: #d4d4d4;">            </span>
<span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">:Â flex;</span></div><div><span style="color: #d4d4d4;">Â Â Â Â Â Â Â Â Â Â Â Â </span><span style="color: #9cdcfe;">align-items</span><span style="color: #d4d4d4;">:Â center;</
span></div><div><span style="color: #d4d4d4;">Â Â Â Â Â Â Â Â Â Â Â Â </span><span style="color: #9cdcfe;">justify-content</span><span style="color: #d4d4d4;">:Â center;</span></div><div><span style="color: #d4d4d4;">Â Â Â Â Â Â Â Â }</span></div></div>
</blockquote>
<br>
<br>
<div class="moz-signature">-- <br>
<div class="moz-signature">
<div style="width: 340px;height: 290px; background-color: blue;
color: yellow;font-weight: bolder; font-size:200%; text-align:
center; margin: 30px 5px 30px 5px;">With over 1.2 billion
devices now running Windows 10, customer satisfaction is
higher than any previous version of windows.</div>
</div>
</div>
</body>
</html>
--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)