Text and image positioning with css
I have a problem with positioning a text with an image using CSS. It works good in Firefox and IE but not in Safari. The image is placed left of the text and I want the text to be in the center of the image in vertical positioning. I'm using a custom font (MyriadProLight), using font-face.
This is how it looks in Safari: http://oi52.tinypic.com/2eg5p8x.jpg
This is how I want it (and how it looks in Firefox and IE): http://oi54.tinypic.com/1zg3xhx.jpg
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Title</title>
<style>
@font-face {
font-family: 'MyriadProLight';
src: url('myriadpro-light-webfont.eot');
src: local('☺'), url('myriadpro-light-webfont.woff') format('woff'), url('myriadpro-light-webfont.ttf') format('truetype'), url('myriadpro-light-webfont.svg#webfontpR0gSEvM') format('svg');
font-weight: normal;
font-style: normal;
}
h1
{
font-size: 20pt;
font-family: "MyriadProLight", "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
color: #333;
text-开发者_Go百科transform:uppercase;
line-height: 21pt;
font-weight: normal;
letter-spacing: 0px;
margin: 0px 0px 10px 0px;
padding: 0px;
}
.iconimage
{
margin-right: 7px;
vertical-align: middle;
}
</style>
</head>
<body>
<h1><img class="iconimage" src="image.png" />This is the header</h1>
</body>
</html>
Not sure this adds anything, but if you view your page in Firefox and then use firebug to hunt down the element, you may notice that an @font-face web fonts are not lined up vertically in the centre of their line-heights. I don't know enough about fonts to know whether this is a font-file issue, but I did all my generation with font-squirrel, which people seem to think is the most reliable option.
WORKAROUNDS
My font ('Destroy') was lined up very heavily toward the bottom. So if I didn't include enough space for it, it looked chopped off at the bottom. Two solutions worked:
If your element is non-breaking: Make the line-height double the font-size.
If your element breaks: add padding to the bottom of the element equal to or slightly less than the font-size.
Obviously (or maybe not so, sorry), I'm dealing with headers and such. I have no idea if these would work with paragraphs or other multi-lined elements.
Positioning images inline with text is a messy business. I would move the image outside of your h1 tag and float it left, then tweak placement with margins. Something like this:
<img class="iconimage" src="mail.png" style="float:left; margin:10px" />
<h1>This is the header</h1>
Maybe it would be best to remove the img tag and do it in CSS alone:
h1 {
padding: 0 0 0 30px;
background: url(image.png) no-repeat left;
}
加载中,请稍侯......
精彩评论