中心img里面的div，vertical-align：middle

我正在学习一个教程，教如何将div放在div里面。它使用line-high和vertical-align：middle。例如，这是小提琴中的代码：中心img里面的div，vertical-align：middle

<div id="ad_unit"> 
    <div class="logo"> 
     <img src="http://i760.photobucket.com/albums/xx243/jhonmarcanob2010/50x50.jpg" alt="image"/> 
    </div>  
</div> 


.logo { 
    background-color: green; 
    position: absolute; 
    width: 138px; 
    height: 300px; 
    line-height: 300px; 
    text-align: center; 
} 

.logo img { 
    vertical-align: middle; 
}

但是，当我尝试将代码放入HTML文件时，图像不是垂直居中。有什么想法吗？

来源

2013-05-06 Rex

我才意识到我有这个DOCTYPE在我的html文件中：<！DOCTYPE html PUBLIC“ - // W3C // DTD HTML 4.01 Transitional // EN”“http：/ /www.w3.org/TR/html4/loose.dtd“>如果我摆脱PUBLIC” - // W3C // DTD HTML 4.01 Transitional // EN“”http://www.w3.org/TR/ html4/loose.dtd“，它有效，这背后的逻辑是什么？ – Rex 2013-05-06 22:51:11

使用过渡将导致许多夸克像这样，请阅读更多：http：//en.wikipedia.org/wiki/Quirks_mode。最好将其删除，以便使用HTML5标准进行渲染，所以只需使用<！DOCTYPE html>'。 – Justin 2013-05-06 22:55:53

我会删除它，非常感谢。 – Rex 2013-05-06 23:12:34

HTML

<div id="ad_unit"> 
    <div class="logo"> 
     <img src="http://i760.photobucket.com/albums/xx243/jhonmarcanob2010/50x50.jpg" alt="image" /> 
    </div> 
</div>

CSS

.logo { 
    background-color: #ccc; 
    height: 300px; 
    line-height: 300px; 
} 
.logo img { 
    vertical-align: middle; 
}

例子：http://jsfiddle.net/justincook/yarzY/

来源

2013-05-06 22:53:46 Justin

感谢您的答案，我想知道你是如何发布小提琴链接在这里，当我试图做到这一点，我得到一个错误说：“链接到小提琴必须由代码完成” – Rex 2013-05-06 23:11:49

顺便说一下，我有一个4px的偏移量在行高，所以而不是行高：300px，我需要做这个行高：296px使其垂直居中。你有什么想法，为什么发生这种情况？ – Rex 2013-05-06 23:15:39

对于链接，我只是复制/粘贴的网址。确保你先添加你的代码，然后添加jsfiddle链接。如果你再试一次，它可能会奏效。 – Justin 2013-05-06 23:22:22

也许这个小窍门可以帮助你。我使用的是直列阻止DIV此：

试试这个HTML代码：

<div id="ad_unit"> 
<div class="logo"> 
    <img src="http://i760.photobucket.com/albums/xx243/jhonmarcanob2010/50x50.jpg" alt="image"/> 
    <div class="vcenter"></div> 
</div>

和CSS

.logo { 
    background-color: green; 
    text-align: center; 
    height: 300px; 
} 

.logo img { 
    vertical-align: middle; 
} 

.logo .vcenter { 
    height: 100%; 
    display: inline-block; 
    vertical-align: middle; 
}

Demo on JSFiddle

来源

2013-05-06 23:15:43 fje

中心img里面的div，vertical-align：middle

回答

相关问题