Question

<style type="text/css">
#displayHeader {
img {
 width: 100%;
 max-width: 100%;
max-height: 100%;
}
 .header-img-inner {
 max-height:100%;
}
}
</style>


<div id="displayHeader" style="height: 83.03px;">
<div class="header-inner">
<div class="row">
<div id="headerCol0" class="col-xs-4 text-center header-img-wrapper">
<div class="header-img-inner">
<img src="test.svg">
<p>TEST</p>
</div>
</div>
<div id="headerCol1" class="col-xs-4 text-center header-img-wrapper">
<div class="header-img-inner">
 <img src="test.svg">
 </div>
        </div>
        <div id="headerCol2" class="col-xs-4 text-center header-img-wrapper">
            <div class="header-img-inner">
                <img src="test.svg">
                <p>tt</p>
            </div>
        </div>

                                        </div>

                            </div>
                        </div>
                            <div id="displayContent" style="height: 264.8px;">
                                <div class="inner">          
</div>
<div>
</div>
<div>
</div>
 <div>

图片和文字走出div区块，为什么会这样？

没有浮动，正确使用。它不适用于位置：父亲的亲戚和孩子的绝对位置，但仍然不能正常工作。

当我进入header-img-inner

时，我只设置了图像的最大高度

Answer 1

为什么不使用 position：inherit; 以便在div中使图像和任何你想要的东西继承位置。这可能有所帮助，试一试。

Answer 2

你想要这样的东西吗？

.block {
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  margin: 20px;
}

.block:before {
  content: '\200B';
/*   content: '';
  margin-left: -0.25em; */
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
 }

.centered {
  display:inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
 }

<div class="block" style="height: 300px;">

    <div class="centered">
      <h1>Some Text</h1>
        <img src="Untitled-2.jpg" height="150px">
    </div>
 </div>

请检查此链接： - https://css-tricks.com/centering-in-the-unknown/

如何在div中制作固定高度的div

2 个答案: