当我尝试vertical-align: middle
使用<img>
某个文本旁边的图标 ( ) 时,该图标总是有点太低(参见示例)。我该如何解决这个问题,使其与文本垂直居中。
p {
font: 10pt Arial, sans-serif;
}
.icon {
vertical-align: middle;
}
Run Code Online (Sandbox Code Playgroud)
<p>This is some text with an <img src="https://i.imgur.com/IJs3M2P.png" class="icon" alt="Icon" width="16" height="16">icon in it.</p>
Run Code Online (Sandbox Code Playgroud)
当我使用绘制图像Graphics.DrawImage
并以比原始图像更大的尺寸绘制图像时,它最终会变得有点小.您可以在下图中看到:
绿线不应该是可见的,也不是图像的一部分.相反,它们被绘制在图像后面,图像应该覆盖它们.
如何绘制尺寸合适的图像?
编辑:我绘制绿色部分与我传入DrawImage
调用的相同矩形,具有图像应该有多大的确切尺寸.所以我的价值观没有任何缺陷(我认为).
编辑2:我使用绿色矩形绘制FillRectangle
,因此不需要进行笔计算.此外,我记录了传递给图像和绿色填充的矩形的值,并且值是正确的.这只是图像的关闭.我稍后会发布代码,因为我现在不在我的电脑上.
编辑3:这是我用来渲染图像的代码:
// This is for zooming
public readonly float[] SCALES = { 0.05f, 0.1f, 0.125f, 0.25f, 0.333f, 0.5f, 0.667f, 0.75f, 1.0f, 1.25f, 1.5f, 1.75f, 2.0f, 2.5f, 3.0f, 3.5f, 4.0f, 4.5f, 5.0f, 6.0f, 7.0f, 8.0f, 10.0f, 12.0f, 15.0f, 20.0f, 30.0f, 36.0f };
private int scaleIndex = 8;
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
float ScaleFactor = SCALES[scaleIndex];
e.Graphics.InterpolationMode = ScaleFactor < 1 ? InterpolationMode.Bicubic : InterpolationMode.NearestNeighbor; …
Run Code Online (Sandbox Code Playgroud) 我使用以下代码添加 http 侦听器:
public class WebServer
{
private readonly HttpListener _listener = new HttpListener();
private readonly Func<HttpListenerRequest, HttpListenerResponse, string> _responderMethod;
public WebServer(string[] prefixes, Func<HttpListenerRequest, HttpListenerResponse, string> method)
{
if (!HttpListener.IsSupported)
throw new NotSupportedException(
"Needs Windows XP SP2, Server 2003 or later.");
// URI prefixes are required, for example
// "http://localhost:8080/index/".
if (prefixes == null || prefixes.Length == 0)
throw new ArgumentException("prefixes");
// A responder method is required
if (method == null)
throw new ArgumentException("method");
foreach (string s in prefixes)
_listener.Prefixes.Add(s); …
Run Code Online (Sandbox Code Playgroud) 我有以下代码:
.dangerous_b {
width: 636px;
height: 72px;
background-image: url('/media/anim.png');
float: left;
background-color: black;
animation: bganim 100ms steps(1, start) infinite;
}
@keyframes bganim {
from { background-position: 0px 0px; }
to { background-position: 0px -72px; }
}
Run Code Online (Sandbox Code Playgroud)
但是动画只播放一次。我究竟做错了什么?
编辑:请注意,动画播放一次,因此存在视觉差异。但我希望动画循环播放。
顺便说一句:这是我使用的图片: http://i.imgur.com/fA80qQc.png
第二次编辑:这是代码片段
.dangerous_b {
width: 636px;
height: 72px;
background-image: url('/media/anim.png');
float: left;
background-color: black;
animation: bganim 100ms steps(1, start) infinite;
}
@keyframes bganim {
from { background-position: 0px 0px; }
to { background-position: 0px -72px; }
} …
Run Code Online (Sandbox Code Playgroud)