Question

我有一个div，它将动态填充图像ect，其宽度取决于图像的数量。我怎样才能把这个div放在中心？

<div class="info_div">
    <div class="center">
        <div class="item_list">
             <h2>Item Title  vbakjlkak;;kkl;lk;k</h2>
        </div>
    </div>
</div>

CSS

.info_div {
background: rgba(0, 0, 0, 0.8);
background-size: cover;
z-index: 3000;
overflow: auto;
margin: 0 auto;
position: fixed;
width: 100%;
height: 100%;
left: 0px;
top: 0%;
}

.item_list {
max-width:50%;
min-width:150px;
background: #ffeec0;
padding:2px;
margin:3px;
border-radius: 2px;
border:1px solid #ffdd7c;
float:  left;
clear: left;
display: inline-block;
}

 .center {
 margin: 0 auto;
 width:600px;
 }

Answer 1

您可以将display:inline-block;提供给.center，然后将text-align:center提供给其父级。

.info_div {
background: rgba(0, 0, 0, 0.8);
background-size: cover;
z-index: 3000;
overflow: auto;
margin: 0 auto;
position: fixed;
width: 100%;
height: 100%;
left: 0px;
top: 0%;
  text-align:center;
}

.item_list {
max-width:50%;
min-width:150px;
background: #ffeec0;
padding:2px;
margin:3px;
border-radius: 2px;
border:1px solid #ffdd7c;
float:  left;
clear: left;
display: inline-block;
}

 .center {
 display:inline-block;
   background-color: red;
 
 }

<div class="info_div">
<div class="center">
    <div class="item_list">
        <h2>Item Title  vbakjlkak;;kkl;lk;k</h2>
  </div>
 </div>

Answer 2

假设您希望居中int solution(int A[], int N) { // write your code in C99 double firstSum = A[0]; double secondSum = 0; double curDiff, maxDiff, maxIndex = 1; for(int i = 1; i < N; i++) { secondSum += A[i]; } curDiff = abs(firstSum - secondSum); maxDiff = curDiff; for(int i = 2; i < N; i++) { secondSum -= A[i-1]; firstSum += A[i-1]; curDiff = abs(firstSum - secondSum); if(curDiff > maxDiff) maxIndex = i; } return maxIndex; }，可以使用此CSS：

item_list

即。移除.item_list { max-width:50%; min-width:150px; background: #ffeec0; padding:2px; margin:3px; border-radius: 2px; border:1px solid #ffdd7c; clear: left; margin:0 auto; }，float:left;，然后添加display:inline-block

Answer 3

试试这个 -

 .center {
            background-color: #F00;
margin: 0px auto;
align-self: center;
align-content: center;
justify-content: center;
display: inline-flex;
width: 600px;
        }
        .item_list {
         background: #FFEEC0 none repeat scroll 0% 0%;
padding: 2px;
margin: 0px auto !important;
border-radius: 2px;
border: 1px solid #FFDD7C;
word-break: break-all;
overflow: visible;
display: inline-block;
float: left;
clear: left;
        }

如何将宽度取决于内容的div居中

3 个答案: