Question

我的设计师同事显然在他的Photoshop中很好地对齐了他的文字。当文本周围总是有一些空格时，如何将他的设计应用于我的代码？我的意思是我可以摆弄负边距，线高（见例）或其他任何东西。但这不是一个解决方案。这个问题很可能已经出现了

HTML：

<section>
     <h1 class="wrong">WRONG</h1>
    <img src="http://creativemedias.files.wordpress.com/2010/02/a_beautiful_day___wp_pack_by_little_stock.jpg" />
     <h1 class="right">Isn't it beautiful!</h1>
</section>

的CSS：

section, img, h1 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    line-height: 1.4285714285714em;
    vertical-align: baseline;
    background: transparent;
    font-family:'Lato', Arial, Arial, Helvetica, sans-serif;
    font-weight: normal;
    letter-spacing: 0;
}
img {
    height: auto;
    max-width: 100%;
    width: 50%;
    float: left;
}
h1 {
    font-size: 2em;
}
.wrong {
    float: left;
}
.right {
    line-height: 0.7em;
}

Answer 1

我们都知道“错误”是对此进行编码的正确方法。你的设计师在这里错了，而不是你的CSS。通常当我遇到这样的情况时，我会忽略确切的设计并按照我所知道的方式做到这一点，然后如果有人抱怨，我告诉他们网络是如何运作的。即使您设置了负边距或做了别的hacky，在某人的浏览器中，如果有不同的字体或更大的字体大小设置等，它会出现问题。为什么要打扰黑客？做得对。

如何处理文本到元素对齐问题

1 个答案: