【问题标题】:Vertical align image within parent div with css使用css垂直对齐父div中的图像
【发布时间】:2010-08-27 20:31:01
【问题描述】:

所以我试图在容器 div 中垂直对齐图像。我尝试添加垂直对齐:中间;没有运气的父 div。

    <div class="contributor_thumbnail"><img src="image.jpg"></div>
    <div class="contributor_thumbnail"><img src="image.jpg"></div>

.contributor_thumbnail {

    position: relative;
    display: block;
    float: left;
    width: 150px;
    height: 150px;
    line-height: 100%;
    text-align: center;
    margin-right: 15px;
    margin-bottom: 15px;
    padding: 5px;
    vertical-align: middle;
    border: 1px solid #bbbbbb;
    border-top: 1px solid #333;
    border-left: 1px solid #333;

}

【问题讨论】:

    标签: css html vertical-alignment


    【解决方案1】:

    我要做的是将图像设置为背景图像。

    .contributor_thumbnail {
        /* Background image instead of using and img tag */
        background: url(image.jpg) center center no-repeat;
        position: relative;
        display: block;
        float: left;
        width: 150px;
        height: 150px;
        line-height: 100%;
        text-align: center;
        margin-right: 15px;
        margin-bottom: 15px;
        padding: 5px;
        border: 1px solid #bbbbbb;
        border-top: 1px solid #333;
        border-left: 1px solid #333;
    
    }
    

    【讨论】:

      【解决方案2】:

      试试这个:

      HTML

      <div class="contributor_thumbnail">
      <div class="content">
          <img src="image.jpg"> 
      </div>
      </div>
      

      CSS:

      .contributor_thumbnail  {float:left; height:50%; margin-bottom:-120px;}
      .content    {clear:both; height:240px; position:relative;}
      

      灵感来自:Lost in the Woods vertically centering with CSS

      【讨论】:

      • 谢谢!我使用了line-height: 2em;,因为我只有一个数字居中。
      【解决方案3】:
      .contributor_thumbnail img {
          margin-left: auto;
          margin-right: auto;
      }
      

      http://www.bluerobot.com/web/css/center1.html

      【讨论】:

      • 这是用于水平居中,而不是垂直
      猜你喜欢
      • 2012-04-02
      • 2012-10-21
      • 2014-11-30
      • 1970-01-01
      • 2022-01-15
      • 1970-01-01
      • 2013-03-06
      • 2011-07-22
      • 2012-11-04
      相关资源
      最近更新 更多