Question

在div中我想要一个全宽的背景颜色并将内容居中。我在其他一些帖子中读到它需要一个外部div来设置背景颜色，然后是一个内部div，其内容宽度为margin:0 auto;。我试过了，但它没有用。我试着将我的内容悬浮起来，这也没有用。

这是我的代码。问题出在div class="themeDesign"我把背景颜色放在哪里。在div class="themeDesignicons"我放width:1000px时，其中一个li元素延伸到下一行，但width:1300px它们出现在同一行而没有居中。为什么？第一个孩子有关系吗？我不能继续提前致谢

＆＃13;

*{
	margin:0px;
	padding:0px;	
}
body{
	width:100%;
}
header{
	background-color:#088da5;
	overflow:hidden;
	padding:15px 0;
}
.main-header{
	width:1300px;
	margin:0 auto;
}
.main-header .left-mainheader{
	float:left;
	margin-right:400px;	
}
.main-header .left-mainheader ul li{
	display:inline-block;
	margin-right:26px;
}
.main-header .left-mainheader li a{
	text-decoration:none;
	color:white;
}
.main-header .right-mainheader{
	float:left;
}
.main-header .right-mainheader ul li{
	display:inline-block;
	margin-right:15px;
}
.main-header .right-mainheader ul li a{
	text-decoration:none;
	color:white;
}
.left-mainheader img{
	padding-right:8px;
}
header .header h1{
	background-image:url(images/logoheader.png);
	width:440px;
	height:84px;
	margin:60px auto;
	overflow:hidden;
	clear:both;
}
.header ul{
	margin:25px auto;
	width:440px;
}
.header li {
	display:inline-block;
	margin:0 15px 0 0;
}
.header li a{
	color:black;
	text-decoration:none;
	font-size:15px;
	font-family: tahoma;
}
header li a:hover{
	text-decoration:underline;
}
.header .headermesa{
	border-top:1px solid #666633;
}
.slider{
	background-color:#f7f8fa;
}
.slidermesa{
	margin:0 auto;
	width:1200px;
	height:421px;
}
.slide img{
	border-top:1px solid #666633;
	width:1200px;
	height:421px;
}
.themeDesign{
	background-color:#f7f8fa;
}
.themedesignheadings{
	margin:0 auto;
	width:1000px;
	padding:35px 0;
	border-bottom:1px dashed #877676;
}
.themeDesignicons{
	width:1000px;
	margin:0 auto;
}
.themeDesignicons ul li{
	display:inline-block;
	width:250px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>-Tutorial for psd-revenant</title>
<meta charset="utf-8">
</head>
<body>
	<header>
		<div class="main-header">
			<div class="left-mainheader">
				<ul>
					<li>
						<a href="#"><img src="images/phoneIcon-header.png"/> +565 975 658</a>
					</li>
					<li>	
						<a href="#"><img src="images/emailheader3.png"/>info@premiumcoding.com</a>
					</li>	
					<li>	
						<a href="#"><img src="images/timeheader2_03.png"/>Monday-Friday : 8.00-20.00</a>		
					</li>
				</ul>
			</div>
			<div class="right-mainheader">	
				<ul>
					<li><a href="#">Latest News</a></li>
					<li><a href="#">Login</a></li>
					<li><a href="#">Register</a></li>
					<li><a href="#">About Us</a></li>
			</div>
		</div>
		<div class="header">
			<h1></h1>
		<div class="headermesa">	
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Apparel</a></li>
				<li><a href="#">Fashion</a></li>
				<li><a href="#">News</a></li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>	
		</div>
	</header>
	<div class="slider">
		<div class="slidermesa">
			<div class="slide">
				<img src="images/mainslide.png"/>
			</div>
		</div>
	</div>
		<div class="themeDesign">
			<div class="themedesignheadings">
				<h2>Check our latest Wordpress Theme which implements a Page Builder and a Revolution Slider</h2>
				<p>Learn how to build Wordpress Themes with ease with a premium Page Builder which allows you to add new Pages in seconds!</p>
			</div>	
			<div class="themeDesignicons">
				<ul>
					<li>
						<div class="disc-cam">
							<div class="icon cam2"></div>
						</div>
						<div class="disc-text">
							<h3>Responsive Design</h3>
							<p>Lorem ipsum dolor sit amet, co
							ctetuer adipiscing elit, sed di
							nonummy nibh euismod te.</p>
							<a href="#">Read More<img src="images/arrow.png"/></a>
						</div>
					</li>
					<li>
						<div class="disc-cam">
							<div class="icon cam2"></div>
						</div>
						<div class="disc-text">
							<h3>Responsive Design</h3>
							<p>Lorem ipsum dolor sit amet, co
							ctetuer adipiscing elit, sed di
							nonummy nibh euismod te.</p>
							<a href="#">Read More<img src="images/arrow.png"></a>
						</div>
					</li>
					<li>
						<div class="disc-cam">
							<div class="icon cam2"></div>
						</div>
						<div class="disc-text">
							<h3>Responsive Design</h3>
							<p>Lorem ipsum dolor sit amet, co
							ctetuer adipiscing elit, sed di
							nonummy nibh euismod te.</p>
							<a href="#">Read More<img src="images/arrow.png"></a>
						</div>
					</li>
					<li>
						<div class="disc-cam">
							<div class="icon cam2"></div>
						</div>
						<div class="disc-text">
							<h3>Responsive Design</h3>
							<p>Lorem ipsum dolor sit amet, co
							ctetuer adipiscing elit, sed di
							nonummy nibh euismod te.</p>
							<a href="#">Read More<img src="images/arrow.png"></a>
						</div>
					</li>
				</ul>
			</div>
		</div>

＆＃13;

Answer 1

试试这个

.themeDesignicons {
width: auto;
margin: 0 auto;
text-align: center;
}

中心内容与完整背景

1 个答案: