مشکل در وسط آوردن یک کلاس [بایگانی]

amin7x

یک شنبه 14 اردیبهشت 1393, 10:30 صبح

سلام دوستان
من از normalize.css (http://necolas.github.io/normalize.css) و onepage-scroll (https://github.com/peachananr/onepage-scroll) استفاده میکنم.
وقتی میخوام کلاس apple-device رو وسط تصویر بیارم ، نمیتونم. همه کد ها رو هم امتحان کردم.
توی سایز 1024 خوب نشون میده ولی وقتی بزرگتر یا کوچیک تر میشه میریزه بهم.:ناراحت:

کد HTML و CSS:

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/onepage-scroll.css">
</head>
<style>
#home:before {
background: url(img/picture1.jpg) no-repeat scroll 0% 0% / 105% auto #27ACC8;
content: "";
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: -1;
}
#home {
background-color: rgba(39, 172, 200, 0.85);
}
#home hgroup, h1, h3 {
text-align: center;
margin: 0;
font-family: 'B Yekan', Tahoma, Arial, sans-serif;
line-height: 1.5em;
}
#home hgroup h1 {
font-size: 2em;
padding-top: 8rem;
}
#home hgroup h3 {
font-size: 1.5em;
opacity: .70;
font-family: 'B Roya', Tahoma, Arial, sans-serif;
}
#home .apple-device {
margin: 0 auto;
text-align: center;
}
#home .apple-device .imac {
background: url(img/imac.png) no-repeat top center / 40%;
width: 1000px;
height: 1117px;
margin-top: 5em;
margin-right: 1em;
position: absolute;
}
#home .apple-device .ipad {
background: url(img/ipad.png) no-repeat top center / 25%;
width: 600px;
height: 825px;
position: absolute;
margin: 12.5em 13em 0 0;
}
#home .apple-device .macbook {
background: url(img/macbook.png) no-repeat top center / 30%;
width: 980px;
height: 980px;
position: absolute;
margin: 14.3em 10em 0 0;
}
#home .apple-device .iphone {
background: url(img/iphone.png) no-repeat top center / 20%;
width: 420px;
height: 765px;
position: absolute;
margin: 14.4em 18em 0 0;
}
</style>
<body>
<section id="home">
<hgroup>
<h1>Hello</h1>
<h3>Welcome</h3>
</hgroup>
<div class="apple-device">
<div class="imac"></div>
<div class="ipad"></div>
<div class="macbook"></div>
<div class="iphone"></div>
</div>
</section>
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.onepage-scroll.min.js"></script>
</body>
</html>

ممنون میشم کمکم کنید.

thinkdiff

یک شنبه 14 اردیبهشت 1393, 11:33 صبح

من به اون کلاسی که گفتی رنگ ، عرض و ارتفا دادم و آوردمش وسط عناصر داخلشم وسطن.میتونی این سه مورد رو که گفتم به سلیقه خودت عوض کنی

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/onepage-scroll.css">

</head>
<style>
#home:before {
background: url(img/picture1.jpg) no-repeat scroll 0% 0% / 105% auto #27ACC8;
content: "";
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: -1;
}
#home {
background-color: rgba(39, 172, 200, 0.85);
}
#home hgroup, h1, h3 {
text-align: center;
margin: 0;
font-family: 'B Yekan', Tahoma, Arial, sans-serif;
line-height: 1.5em;
}
#home hgroup h1 {
font-size: 2em;
padding-top: 8rem;
}
#home hgroup h3 {
font-size: 1.5em;
opacity: .70;
font-family: 'B Roya', Tahoma, Arial, sans-serif;
}
#home .apple-device {
margin: 0 auto;
text-align: center;
width: 400px;
height: 250px;
background: #935896;
}
#home .apple-device .imac {
background: url(img/imac.png) no-repeat top center / 40%;
width: 100%;
height: 40px;
margin:10px 0;
}
#home .apple-device .ipad {
background: url(img/ipad.png) no-repeat top center / 25%;
width: 100%;
height: 40px;
margin:10px 0;
}
#home .apple-device .macbook {
background: url(img/macbook.png) no-repeat top center / 30%;
width: 100%;
height: 40px;
margin:10px 0;
}
#home .apple-device .iphone {
background: url(img/iphone.png) no-repeat top center / 20%;
width: 100%;
height: 40px;
margin:10px 0;
}
</style>
<body>
<section id="home">
<hgroup>
<h1>Hello</h1>
<h3>Welcome</h3>
</hgroup>
<div class="apple-device">
<div class="imac">test</div>
<div class="ipad">test</div>
<div class="macbook">test</div>
<div class="iphone">test</div>
</div>
</section>
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.onepage-scroll.min.js"></script>
</body>
</html>