显示问题CSS

下面是一个JSFiddle的链接。我遇到了麻烦，因为site-wrap div的起始处有一个文字图像，名称为background-image，text位于该div内。显示问题CSS

如果我将line-height添加到text div，则会调整高度以适合该高度，但是我只是希望将整页高度和宽度添加到div并将文本居中。

任何帮助深表感谢。

2016-09-17 Jesse

您是否希望显示图像，以便在菜单超链接之间制作完整的静态横幅？它会像菜单一样滚动页面的其余部分吗？假设是，重构HTML会更加明智，这样div就在'menu-1-left'和'menu-1-right'之间。另外，假设横幅纯粹是“联系我们”，那么将文本实际绘制到图像本身可能会更简单。 –

感谢您的回复黑曜石。我实际上正在寻找它更多的页面“标题”，因为它不会是静态/固定的。相反，它会滚动页面的内容在'网站包装' 哦，菜单项之间的空白是标志的意思。 – Jesse

我还没有完全理解这个问题，对不起。所以问题是你需要确保'联系我们'文本保持垂直居中取决于图像的大小？一种方法是将'display：table'应用于'background-image'，并将'display：table-cell'和'vertical-align：middle'应用于'text'。同时从'text'中删除'height'和'line-height'。这将确保文本总是垂直居中，但请注意，由于当前的HTML结构，“background-image”需要从“top-bar”偏移。 –

您措辞你的问题的方式是有点混乱，但我相信你正在寻找：

width:100vw; 
height:100vh;

大众是视口的宽度和VH是视高度。

来源

2016-09-17 01:36:43 Derek

我一直坚持这几天，甚至没有想到使用视口值。天才！ – Jesse

回答

相关问题