Question

我有一个空白的HTML页面，我想对齐2个元素... 垂直和水平。这些元素是<img>标记，文本的<p>标记，以及包含这些元素的2个<div>标记...

当我调整窗口大小时，我不希望浏览器将这些元素切断。经过无数个小时试图解决这个问题，并搜索Stack和其他各种网站......我走近了，但我永远无法像我想要的那样得到100％...

这个白色空间位于文本的底部和边界第二个div的骑行侧，罪魁祸首似乎是<p>。当我摆脱标签时，白色空间消失了。但是，我想要图像下的文字，所以我需要它...

白色空间让我怀疑内容是否放在中心位置。我怎么能摆脱它？

HTML

<body>
  <div id="container">
    <div id="content">
      <p>
        <a href="index.html"><img src="http://www.iconsdb.com/icons/preview/blue/square-xxl.png" alt="Under Construction"></a>
        <br> UNDER CONSTRUCTION!
      </p>
    </div>
  </div>
</body>

CSS

body
{
    margin:0;
    background-color: seagreen;
} 

#container
{
    position:relative;
    height:100%;
    width:100%;
    min-width:400px;
} 


#content 
{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    outline:3px solid red;

}

#content p 
{
    margin:0;
    text-align:center;
    font-family:Courier;
    font-size:48px;
    white-space:nowrap;
    color:springgreen;
}

Answer 1

我已经完成了你的代码。我在上面给出的代码中做了一些更改。我希望这对你有所帮助。的 CSS

＆＃13;
＆＃13;
body { margin:0; background-color: seagreen; } img{ display: block; margin: auto; width: 50%; } /* add this css to remove the white space under text */ p { margin-bottom: -9px !important; } #container { position:relative; height:100%; width:100%; min-width:400px; } #content { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); outline:3px solid red; margin-top: 200px; padding-top: 10px; } #content p { margin:0; text-align:center; font-family:Courier; font-size:48px; white-space:nowrap; color:springgreen; }
＆＃13;
<div id="container"> <div id="content"> <a href="index.html"><img src="http://spectrumapartments.com.au/wp-content/themes/spectrumapartments/img/building/red-squares.png" alt="Under Construction"></a> <br> <p>UNDER CONSTRUCTION!</p> </div> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

我更改了HTML，将您的文字封装在span代码中并删除了br：

<body>
  <div id="container">
    <div id="content">
      <p>
        <a href="index.html"><img src="http://www.iconsdb.com/icons/preview/blue/square-xxl.png" alt="Under Construction"></a>
        <span>UNDER CONSTRUCTION!</span>
      </p>
    </div>
  </div>
</body>

然后我将其添加到您的CSS中。它将封闭的span样式设置为块，因此您无需在HTML中使用<br>标记。它还使用行高来调整文本行上方和下方的间距。

#content span {
   display: block;
   margin: 0;
   line-height: .8;
}

从此处删除了position属性：

#container
{
    /*position:relative;*/ /* Removed */
   height:100%;
   width:100%;
   min-width:400px;
}

以下是fiddle

示例

<强>更新

您在Firefox上看到空白区域的原因似乎是您在#content的CSS上使用outline而不是border。

我不知道为什么Firefox会以不同的方式呈现大纲。但是，如果您将#content的CSS更改为以下内容，您将在Chrome，Firefox，Edge和IE（11）上获得相同的结果。：

#content 
{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    /*outline:3px solid red;*/
    border: 3px solid red;
}

以下是更新后的fiddle

Answer 3

我还有其他尝试，希望这会为你解决这个问题。你的声音很糟糕。

＆＃13;

*{
  border: 0; 
  margin: 0; 
  margin: 0; 
}
.container {
    font-size: 0;
}
.container span {
    font-size: 35px;
    background: #ff8ea1;
    padding: 0;
    margin: 0; 
}

.container span.no-space {
    display: inline-block;
    vertical-align: top;
    height: .75em;
    line-height: .75em;
}

＆＃13;

<div class="container">
    <span>Under Construction</span>
    <div style="height: 20px;"></div>
    <span class="no-space">Under Construction</span>
</div>

＆＃13;

尝试这一个！

输入文本时如何摆脱div元素底部的空白区域

3 个答案: