我正在尝试构建一个简单的图库,其中图库项目放在div中。但是,由于项目向左浮动,当我将 text-align:center; 添加到父div时,它们不会整体对齐。 (我使用Bootstrap 3和父div是 panel-body 。内容位于面板体内。)
CSS:
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css" media="screen">
.image-box {
float: left;
}
.image-box img {
width: 128px;
height: 128px;
}
</style>
HTML:
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">GALLERY</h3>
</div>
<div class="panel-body">
<div class="image-box">
<img src="member-icon.png">
<P class="caption">Image Description</P>
</div>
<div class="image-box">
<img src="member-icon.png">
<P class="caption">Image Description</P>
</div>
<div class="image-box">
<img src="member-icon.png">
<P class="caption">Image Description</P>
</div>
</div>
</div>
答案 0 :(得分:4)
text-align:center; 不起作用。使用内联块。
请参阅以下代码
var myApp = angular.module('myApp',['ui.sortable'])
.controller('MyCtrl', ['$scope', function($scope) {
$scope.section = [{id: 1}, {id:2}];
$scope.subSection = [{id:1, parentId: 1}, {id:2, parentId: 1}, {id:3, parentId: 2}];
$scope.addSection =function(){
var newId = $scope.section.length +1;
$scope.section.push({id: newId});
};
$scope.addSubSection = function(parentIndex) {
var newSubId = $scope.subSection.length + 1;
$scope.subSection.push({id:newSubId, parentId:parentIndex});
};
}]);
&#13;
.panel-body {
text-align: center;
}
.image-box {
display: inline-block;
margin-left: -4px;
}
.image-box img {
width: 128px;
height: 128px;
}
&#13;
抱歉英语不好
答案 1 :(得分:1)
HTML文件:
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">GALLERY</h3>
</div>
<div class="panel-body">
<div class="col-md-offset-4 col-xs-offset-3">
<div class="image-box">
<img src="member-icon.png">
<p class="caption">Image Description</p>
</div>
<div class="image-box">
<img src="member-icon.png">
<p class="caption">Image Description</p>
</div>
<div class="image-box">
<img src="member-icon.png">
<p class="caption">Image Description</p>
</div>
</div>
</div>
</div>
CSS文件:
.image-box {
float: left;
}
.image-box img {
width: 128px;
height: 128px;
padding:15px;
}