如何将div的内容与向左浮动的内容元素对齐?

时间:2016-05-29 06:29:27

标签: html css twitter-bootstrap

我正在尝试构建一个简单的图库,其中图库项目放在div中。但是,由于项目向左浮动,当我将 text-align:center; 添加到父div时,它们不会整体对齐。 (我使用Bootstrap 3和父div是 panel-body 。内容位于面板体内。)

Content Floating Left:

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>

2 个答案:

答案 0 :(得分:4)

使用浮动时,

text-align:center; 不起作用。使用内联块。

请参阅以下代码

&#13;
&#13;
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;
&#13;
&#13;

Here is a live demo

抱歉英语不好

答案 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;
   }

请参阅演示:Div content center in panel body