背景只在网站布局的一侧重复,内容居中? [英] Background repeat only on one side of the site layout, content centered?
问题描述
如何仅在网站布局的一侧无限重复背景颜色/图像并保持内容居中?
How can I repeat endlessly a background color/image only on one side of my site layout and keep the content centered?
最佳方法似乎是表格因为它甚至可以在IE6中工作,但有没有一种方法可以在没有表格和javascript的情况下完成这项工作并至少在IE7 +中工作?
The best method seems to be with tables as it will work even in IE6, however is there a method to do this without tables and javascript and be working in at least IE7+?
使用divs / display的方法:表格在IE中根本不起作用,
The method with divs/display:table does not work in IE at all,
<style type="text/css">
*{
margin:0;
padding:0;
}
/* table method */
.table-container{
margin-top:20px;
border:0;
border-collapse:collapse;
width:100%;
height:100px;
}
.table-container .left{
background:transparent;
}
.table-container .center{
width:960px;
background:#ddd;
vertical-align:top;
}
.table-container .center div{
margin:0 auto;
width:960px;
}
.table-container .right{
width:auto;
background:#ccc;
}
/* div method */
.div-container{
display:table;
margin-top:20px;
border:0;
width:100%;
height:100px;
}
.div-container .left{
display:table-cell;
background:transparent;
}
.div-container .center{
display:table-cell;
width:960px;
margin:0 auto;
background:#ddd;
vertical-align:top;
}
.div-container .right{
display:table-cell;
width:auto;
background:#ccc;
}
</style>
<table class="table-container">
<tr>
<td class="left"> </td>
<td class="center"><div>Table method : This space must be centered</div></td>
<td class="right"> </td>
</tr>
</table>
<div class="div-container">
<div class="left"> </div>
<div class="center">Div method : This space must be centered</div>
<div class="right"> </div>
</div>
推荐答案
你可以通过半屏背景颜色实现很酷的效果使用绝对位置。还有比使用 display:table
布局更简单的方法来中心文本 - 我也在CSS中显示了这一点。
You can achieve cool effects like half screen background colours by using position absolute. And there are easier ways to center text than using the display: table
layout - which I have also shown in my CSS.
这是关于JSFiddle的工作考试,我已尽力解释CSS中的问题以下评论。
Here is a working examnple on JSFiddle and I have done my best to explain the CSS in comments below.
以下是代码:
.content {
margin: auto; //use these to center the content
position: relative: //position relative, so the absolute div is positioned relative to this div
text-align: center; //use these to center the content
width: 60%;
}
.content p {
position: relative; //position relative so we can set a z-index
z-index: 1; //z-index is higher than that of the background so it appears above
}
.background {
background-color: #777;
height: 100%;
left:0; //we want the left of the div to be 0px from the left of its container div
position: absolute; //position absolute, so we can put it anywhere we want
top: 0; //we want the top of the div to be 0px from the top of the container div
width: 50%;
z-index: 0; //we want the z-index to be lower than the text
}
<div class="content">
<p>...text...</p>
<div class="background"></div>
</div>
享受
Enjoy
这篇关于背景只在网站布局的一侧重复,内容居中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!