如何在兩行中對齊圖像avec文本，這在IE7中起作用？

我嘗試將圖片（徽標）與兩行文本（網站標題和簡短說明）對齊。如何在兩行中對齊圖像avec文本，這在IE7中起作用？

我嘗試這樣做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" xml:lang="fr-FR" lang="fr-FR"> 
    <head> 
     <link type="text/css" rel="stylesheet" href="style.css" /> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    </head> 
    <body> 
     <div id="site"> 
      <div id="header"> 
       <a title="Retour à l'accueil" href="#"><img width="40" height="40" title="mon logo" alt="mon logo" src="images/logo.png"/></a> 
       <div class="title"> 
        <h1>Mon site</h1> 
        <div>mon sous-titre avec des g et des p</div> 
       </div> 
       <div class="switchlanguage right"> 
        <a href="#" title="english site"><strong>english</strong></a> 
       </div> 
       <div class="clear"></div> 
      </div> 
      <div id="content"> 
       <p>homepage</p> 
      </div> 
     </div> 
    </body> 
</html>

這個style.css中：

/********** 
* RESET * 
**********/ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
/*table, caption, tbody, tfoot, thead, tr, th, td,*/ 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font: inherit; 
    vertical-align: baseline; 
} 

/* HTML5 display-role reset for older browsers */ 

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
html { 
    overflow:auto; 
    font-size: 62.5%; 
} 
body { 
    line-height: 1; 
    color: #000;/*#656565;*/ 
} 
ol, ul { 
    list-style-type: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

/********** 
* COMMON * 
**********/ 
body { 
    font-family:Arial; 
    color:#333333; 
} 

.left { 
    float:left; 
} 
.right { 
    float:right; 
} 
.clear { 
    clear:both; 
    height:0; 
} 
#site strong { 
    font-weight:700; 
} 
#header, #content, #footer { 
    width: 990px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-left:20px; 
    padding-right:20px; 
} 

/********** 
* HEADER * 
**********/ 

#header { 
    padding-top:20px; 
    padding-bottom:20px; 
    background-color: #FFF; 
} 

#header img { 
    float: left; 
    margin:0; 
    padding:0; 
    border: none; 
} 

#header div.title { 
    float: left; 
    padding-left:20px; 
} 

#header div.title h1 { 
    font-size:2.6em; 
    line-height:0.904em; 
    height:0.904em; 
} 

#header div.title div { 
    font-size:1.8em; 
    line-height:0.917em;  
    height:1em; 
} 
#header .switchlanguage { 
    font-size:1.1em; 
} 
#header .switchlanguage a { 
    background-image:url('images/icn_langage.png'); 
    background-repeat:no-repeat; 
    background-position:left center; 
    padding-left:20px; 
    color:#333333; 
    text-decoration:none; 
} 
/********** 
* CONTENT * 
**********/ 

#content { 
    background-image:url('images/bg_body_repeat.jpg'); 
    background-repeat:repeat; 
    min-height:400px; 
    padding-top:10px; 
    padding-bottom:20px; 
    border-top:1px solid #ccc; 
    border-bottom:1px dotted #909090; 
}

但在IE7中，字母P和G裁剪。

You can see the result here

什麼是使圖像的最佳實踐，並在兩行文本？

來源

2012-06-20 Cédric E.

在你的CSS這裏：

#header div.title div { 
    font-size: 1.8em; 
    line-height: 0.917em; 
    height: 1em; 
}

增加你的line-height - 這應該修復它。確切的價值將需要一些測試，並取決於您的設計。

您也可以，想換你的文字<p>標籤而不是<div>標籤，當你在代碼中沒有其他地方 - 只是語義！

來源

2012-06-20 08:48:52 Luca

謝謝。它似乎在incrase行高度工作。 –

更改HTML到

  <div class="title"> 
       <h1>Mon site</h1> 
       <div class="tagline">mon sous-titre avec des g et des p</div> 
      </div>

和CSS

.title .tagline{ 
    padding:0 0 2px 0; 
}

，如果你知道你是以往任何時候都具有標題DIV中1個格，你可以改變風格

.title div{ padding:0 0 2px 0;}

而不是像上面那樣做一個單獨的類（.tagline）

來源

2012-06-20 08:39:33 Chin

如何在兩行中對齊圖像avec文本，這在IE7中起作用？

回答

相關問題