Question

我正在尝试将图像顶部的文本对齐，即使底层图像的大小增加/减少，它也会保持对齐。我正在使用从Photoshop测量中获取的px值。

请查看http://jsfiddle.net/dXNgx/。 “For”这个词正在覆盖在图像上。它的高度为20px，但放置在图像上时，font-size: 20px;会产生小于底层图像的“For”。是什么给了什么？

Answer 1

你需要将div.layer放在＃page1之外，否则-moz-transform：scale（.5）;适用于它。

<a href="#" id="zoom_in">Zoom In +</a> | <a href="#" id="zoom_out">Zoom Out -</a>
<div style="position:relative;">
    <div style="-moz-transform:scale(.5); -moz-transform-origin:left top;position:absolute;" class="page" id="page1">
        <div class="layer" style="z-index:1;">
            <img src="http://cobalt.xtracta.com/images/image.jpg" style="width:2480px; height:3508px">
        </div>
    </div>
    <div class="layer" style="z-index:2;">
        <div style="font-size: 20px; position:absolute; color:#F00; top: 1550px; left: 306px;">For</div>
    </div>
</div>

http://jsfiddle.net/dXNgx/2/

文字无法正确对齐 - 字体大小问题？

1 个答案: