Question

我正在尝试使用此代码将div放在另一个div的中心位置：

<div style="width:100%; height: 300px; background:red;">
  <div style="margin:auto; min-width:50%; height:100%; background:green;">Text</div>
</div>

它导致一个宽绿色div，宽度为100％。我预计它会达到50％。有人可以告诉我为什么css不会给它50％的宽度并居中吗？

Answer 1

更新回答

<div style="width:100%; height: 300px; background:red; text-align: center">
      <div style="min-width:50%; display: inline-block; height:100%; background:green;">Text</div>
</div>

Answer 2

答案在于最小宽度......这是最小值。块级元素的默认宽度为100％，因此它已超过50％，因此会扩展为全宽。

您需要将显示属性更改为inline-block，然后使用父级text-align:center将孩子置于中心位置。

.parent {
  width: 100%;
  height: 300px;
  background: red;
  text-align: center;
}
.child {
  display: inline-block;
  min-width: 50%;
  height: 100%;
  background: green;
}

<div class="parent">
  <div class="child">Text</div>
</div>

Answer 3

将宽度设置为100％的父div指示div的内容应占用宽度的100％。内部div表示确保此div的最小宽度为50％。如果您想将宽度居中并将其固定为50％，请尝试使用

 <div style="margin:auto; width:50%; height:100%; background:green; 
      margin-left: auto ;margin-right: auto;">Text</div>

http://www.thesitewizard.com/css/center-div-block.shtml

css min-width无法正常工作

3 个答案: