Question

我有一个带有图像的div。我想知道是否有可能将这个div水平放置50％并且为图像的一半提供补偿。当我使用50％时，由于图像的宽度，图像不居中。我可以使用49％，它在更大的屏幕上看起来不错，但在移动屏幕上，它不行。图像宽度为100px。

有没有办法解决这个问题？

HTML

<div class="fullscreen-arrow"><img src="wimages/arrow.png" alt="button"></div>

CSS

.fullscreen-arrow {
position: absolute;
left: 50%;
top: 80%;
}

Answer 1

一个常见的伎俩是使用一个负边距，该边距是图像的一半（或高）：

__fastcall TForm1::TForm1(TComponent* Owner)
        : TForm(Owner)    
{    
  DrawingBoard = new Graphics::TBitmap;    
  DrawingBoard->Width =  PaintBox1->ClientWidth;     
  DrawingBoard->Height = PaintBox1->ClientHeight;    
}

void __fastcall TForm1::PaintBox1Paint(TObject *Sender)
{     
        DrawingBoard->Canvas->Pen->Color = clBlack;    
        DrawingBoard->Canvas->Brush->Color = clWhite;    
        DrawingBoard->Canvas->FillRect(TRect(0,0,DrawingBoard->Width,DrawingBoard->Height));
        DrawingBoard->Canvas->MoveTo(256,216);    
        DrawingBoard->Canvas->LineTo(270,250);    
        PaintBox1->Canvas->Draw(0,0,DrawingBoard);
}

这假设您的图像高50像素，宽100像素（并且您事先知道图像的大小）。

Demo (jsFiddle)

可以补偿图像宽度和中心水平吗？

1 个答案: