引導3中心圖像

我試圖把圖像總是在一些元素中，中心，唯一的問題是，這是行不通的引導3中心圖像

這裏是我的代碼

CSS

.panel - empty { 
     width: 100 % ; 
     height: 400 px; /* for demo only */ 
    } 
    .panel-empty-inside { 
     display: table-cell; 
     text-align: center; 
     vertical-align: middle; 
    } 
    .box-inside { 

     display:inline-block; 
     vertical-align: top; 
    }

而且HTML

<div class="panel-empty"> 
       <div class="panel-empty-inside"> 
        <div class="box-inside"> 
         <img class="img-responsive center-block" src="http://www.gusonthego.com/wp-content/uploads/2012/04/Gus-Flying-Banner-Hello-nBG.png" alt="Banner"/> 
        </div> 
       </div> 
      </div>

這裏是工作小提琴 https://jsfiddle.net/DTcHh/9395/

來源

2015-07-01 Miomir Dancevic

您正在使用類IMG響應這增加display:block對您的圖像，並不能使用text-align:center居中。您可以使用margin:0 auto將已知寬度的塊元素居中。看看小提琴https://jsfiddle.net/DTcHh/9397/

來源

2015-07-01 06:59:50 dafyk

你必須把高度放在圖像的父母。

.panel-empty-inside { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    height: 400px; 
}

它工作正常。

來源

2015-07-01 06:51:15

請刪除.panel-empty類中的高度和寬度，並刪除顯示：table-cell，text-align：center.panel-empty-inside class然後運行，這是工作。

.panel-empty{ 
     text-align:center; 
    } 
    .panel-empty-inside { 
     vertical-align: middle; 
    } 
    .box-inside { 
     display:inline-block; 
     vertical-align: top; 
    }

來源

2015-07-01 06:54:02

你需要顯示添加：表到容器顯示：表細胞

在這裏，你需要添加

.panel-empty { 
display:table; 
}

來源

2015-07-01 06:58:09 Aruna

引導3中心圖像

回答

相關問題