對齊問題在浮動div

-1

我有一個問題，對齊圖像在浮動到左邊的div。在下面的代碼中如何將「logo.jpg」對齊到垂直和horizentally中心？謝謝。對齊問題在浮動div

<!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> 
<meta http-equiv="Content-Type" /> 
<title>layout</title> 
<style type="text/css"> 

body,div,ul,li,dl,dt,dd,ol,p,h1,h2,h3,h4,h5,h6,form {font-size:11px; margin:0;padding:0;line-height: 150%;} 
ul,ol,dl {list-style:none} 
img {border:0;vertical-align:top;} 
ul {list-style:none; padding:0; margin:0;} 


#_layout {margin:0 auto; width:980px;} 
#_top_cntr {width:980px; height:150px; background:#fff; margin-bottom:10px;} 

/* top_cntr */ 
#_brand {height:110px; background:url(images/top_bg.jpg);} 

#_left_logo {width:280px; height:110px; float:left; padding-left:10px;} 
#_right_logo {width:680px; height:110px; float:right; margin-left:10px;} 

</style> 
</head> 
<body> 
<div id="_layout"> 
    <div id="_top_cntr"> 
     <div id="_brand"> 
      <div id="_left_logo"> 
       <img src="images/logo.jpg"/> 
      </div> 
      <div id="_right_logo"> 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

來源

2012-08-07 Ronaldo.K

to downvoters：考慮在投票時添加註釋 – haynar 2012-08-07 00:27:11

你必須使用vertical-align: middle但它僅適用於元素與display: table-cell需要在this example添加它也一樣（我已經修改#_left_logo的風格）。

你可以看看this article，有一對夫婦的其他方法，你怎麼能垂直居中的DIV

來源

2012-08-07 00:21:27 haynar

的，我認爲這通常通過CSS來實現的內容。

<div id="_brand"> 
    <a id="_left_logo" class="img-replacement"> <!-- best practice to make the logo a link --> 
     Now you can even throw text Here as a fall back when the image doesn't work 
    </a> 
    <div id="_right_logo"> 
    </div> 
</div>

然後：

.img-replacement { 
    display: block; 
    text-indent: -9999px; 
} 

#_left_logo { 
    width:280px; 
    height:110px; 
    float:left; 
    padding-left:10px; 

    /* and then: */ 
    background: url("/images/logo.png") center center no-repeat; 
}

來源

2012-08-07 01:32:27

如果您知道圖像的高度的高度，你可以用position: absolute做到這一點。例如，圖像大小200x60。

#_left_logo {width:280px; height:110px; float:left; padding-left:10px; position: relative;} 

#_left_logo img {width:200px; height:60px; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -30px; }

來源

2012-08-07 04:00:59 Zendy

對齊問題在浮動div

回答

相關問題