如何在水平滚动时将内部div保持在包含div的中心(How Can i keep inner divs centered to the containing div when horizontally scrolling)
我拥有的
http://codepen.io/prostar100/pen/rjrXjN
.main { background: url("https://s-media-cache-ak0.pinimg.com/originals/42/dd/a0/42dda08c9f6ccdb95e3b97d3424a5c83.jpg"); background-repeat: no-repeat; background-size: cover; margin: 0; padding: 10%; max-width: 900%; max-height: 400%; margin-top: 5px; position: absolute; z-index:-1; } .prop { border: 2px solid #3f6096; padding: 20px 10px; text-align: center; width: 300px; margin-bottom: 20px; display: inline-block; } .rowtwo { width: 85%; margin-left: 10%; display: inline-block; }标题文本中心在扩展浏览器时带有页面，但div的/框不包含。 另外，我希望row2中的2个div相对于上面的3个div保持居中。
What i have
http://codepen.io/prostar100/pen/rjrXjN
.main { background: url("https://s-media-cache-ak0.pinimg.com/originals/42/dd/a0/42dda08c9f6ccdb95e3b97d3424a5c83.jpg"); background-repeat: no-repeat; background-size: cover; margin: 0; padding: 10%; max-width: 900%; max-height: 400%; margin-top: 5px; position: absolute; z-index:-1; } .prop { border: 2px solid #3f6096; padding: 20px 10px; text-align: center; width: 300px; margin-bottom: 20px; display: inline-block; } .rowtwo { width: 85%; margin-left: 10%; display: inline-block; }The title text center's with the page when stretching the browser, but the div's/boxes do not. also, i want the 2 divs in row2 to stay centered relative to the 3 divs above.
最满意答案
由于要居中的块是display: inline-block您可以将text-align: center应用于父对象以居中。
$('.options').hide();
$('.mb').on('click', function() {
$('.options').toggle();
});
$("#l1").click(function () {
window.open(
'https://www.google.com/',
'_blank'
);
});
$("#l2").click(function () {
window.open(
'https://www.google.com/',
'_self'
);
});
$("#l3").click(function () {
window.open(
'https://www.google.com/',
'_blank'
);
});
$("#l4").click(function () {
window.open(
'https://www.google.com/',
'_blank'
);
});
body {
background-color: #FFF;
margin: 0;
padding: 0;
}
/*----------- section 2 --------------*/
.main {
background: url("https://s-media-cache-ak0.pinimg.com/originals/42/dd/a0/42dda08c9f6ccdb95e3b97d3424a5c83.jpg");
background-repeat: no-repeat;
background-size: cover;
margin: 0;
padding: 10%;
max-width: 900%;
max-height: 400%;
margin-top: 5px;
position: absolute;
z-index: -1;
}
#mainhead {
color: #3f6096;
font-family: 'Quicksand', sans-serif;
font-size: 28px;
font-weight: 400;
line-height: 30px;
margin: 10px 0px;
text-align: center;
}
.subtext {
padding-bottom: 30px;
}
p {
color: #3f6096;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 100;
line-height: 24px;
margin: 90 auto;
text-align: center;
}
.prop {
border: 2px solid #3f6096;
padding: 20px 10px;
text-align: center;
width: 300px;
margin-bottom: 20px;
display: inline-block;
}
.diploma {
-webkit-filter: brightness(50);
}
h2 {
color: #3f6096;
font-family: 'Open Sans', sans-serif;
text-align: center;
font-size: 28px;
font-weight: 100;
}
.prop h2 {
font-family: 'Quicksand', sans-serif;
font-size: 24px;
}
.rowtwo {
width: 85%;
margin-left: 10%;
display: inline-block;
}
.value-props {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Smite</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Quicksand:300,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="main">
<h3 id='mainhead'>Lorem ipsum dolor sit amet, consetetur dissentias duo at.</h3>
<p class='subtext'>Lorem ipsum dolor sit amet, consetetur dissentias duo at. Est oratio mentitum similique ne, labore molestie philosophia eu vim. An deleniti iudicabit vis, te vero quaeque volutpat vim, in eum aliquid corpora. Illum euismod atomorum usu ad.</p>
<div class="value-props">
<div class="prop" id='prop1'>
<img class='diploma' src="https://cdn2.iconfinder.com/data/icons/bullet-points/64/Bulletpoint_Bullet_Listicon_Shape_Bulletfont_Glyph_Typography_Bullet_Point_Customshape_Wingding_Custom_Seal_Award_Badge_Certificate_Medal_Star-512.png" width="60px">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consetetur dissentias duo at. Est oratio mentitum similique ne, labore molestie philosophia eu vim.</p>
</div>
<div class="prop" id='prop2'>
<img class='diploma' src="https://cdn2.iconfinder.com/data/icons/bullet-points/64/Bulletpoint_Bullet_Listicon_Shape_Bulletfont_Glyph_Typography_Bullet_Point_Customshape_Wingding_Custom_Seal_Award_Badge_Certificate_Medal_Star-512.png" width="60px">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consetetur dissentias duo at. Est oratio mentitum similique ne, labore molestie philosophia eu vim.</p>
</div>
<div class="prop" id='prop3'>
<img class='diploma' src="https://cdn2.iconfinder.com/data/icons/bullet-points/64/Bulletpoint_Bullet_Listicon_Shape_Bulletfont_Glyph_Typography_Bullet_Point_Customshape_Wingding_Custom_Seal_Award_Badge_Certificate_Medal_Star-512.png" width="60px">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consetetur dissentias duo at. Est oratio mentitum similique ne, labore molestie philosophia eu vim.</p>
</div>
<!-- 2nd row of certificates -->
<div class='rowtwo'>
<div class="prop" id='prop3'>
<img class='diploma' src="https://cdn2.iconfinder.com/data/icons/bullet-points/64/Bulletpoint_Bullet_Listicon_Shape_Bulletfont_Glyph_Typography_Bullet_Point_Customshape_Wingding_Custom_Seal_Award_Badge_Certificate_Medal_Star-512.png" width="60px">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consetetur dissentias duo at. Est oratio mentitum similique ne, labore molestie philosophia eu vim.</p>
</div>
<div class="prop" id='prop3'>
<img class='diploma' src="https://cdn2.iconfinder.com/data/icons/bullet-points/64/Bulletpoint_Bullet_Listicon_Shape_Bulletfont_Glyph_Typography_Bullet_Point_Customshape_Wingding_Custom_Seal_Award_Badge_Certificate_Medal_Star-512.png" width="60px">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consetetur dissentias duo at. Est oratio mentitum similique ne, labore molestie philosophia eu vim.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Since the blocks you want to center are display: inline-block you can apply text-align: center to the parent to center them.
$('.options').hide();
$('.mb').on('click', function() {
$('.options').toggle();
});
$("#l1").click(function () {
window.open(
'https://www.google.com/',
'_blank'
);
});
$("#l2").click(function () {
window.open(
'https://www.google.com/',
'_self'
);
});
$("#l3").click(function () {
window.open(
'https://www.google.com/',
'_blank'
);
});
$("#l4").click(function () {
window.open(
'https://www.google.com/',
'_blank'
);
});
body {
background-color: #FFF;
margin: 0;
padding: 0;
}
/*----------- section 2 --------------*/
.main {
background: url("https://s-media-cache-ak0.pinimg.com/originals/42/dd/a0/42dda08c9f6ccdb95e3b97d3424a5c83.jpg");
background-repeat: no-repeat;
background-size: cover;
margin: 0;
padding: 10%;
max-width: 900%;
max-height: 400%;
margin-top: 5px;
position: absolute;
z-index: -1;
}
#mainhead {
color: #3f6096;
font-family: 'Quicksand', sans-serif;
font-size: 28px;
font-weight: 400;
line-height: 30px;
margin: 10px 0px;
text-align: center;
}
.subtext {
padding-bottom: 30px;
}
p {
color: #3f6096;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 100;
line-height: 24px;
margin: 90 auto;
text-align: center;
}
.prop {
border: 2px solid #3f6096;
padding: 20px 10px;
text-align: center;
width: 300px;
margin-bottom: 20px;
display: inline-block;
}
.diploma {
-webkit-filter: brightness(50);
}
h2 {
color: #3f6096;
font-family: 'Open Sans', sans-serif;
text-align: center;
font-size: 28px;
font-weight: 100;
}
.prop h2 {
font-family: 'Quicksand', sans-serif;
font-size: 24px;
}
.rowtwo {
width: 85%;
margin-left: 10%;
display: inline-block;
}
.value-props {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Smite</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Quicksand:300,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="main">
<h3 id='mainhead'>Lorem ipsum dolor sit amet, consetetur dissentias duo at.</h3>
<p class='subtext'>Lorem ipsum dolor sit amet, consetetur dissentias duo at. Est oratio mentitum similique ne, labore molestie philosophia eu vim. An deleniti iudicabit vis, te vero quaeque volutpat vim, in eum aliquid corpora. Illum euismod atomorum usu ad.</p>
<div class="value-props">
<div class="prop" id='prop1'>
<img class='diploma' src="https://cdn2.iconfinder.com/data/icons/bullet-points/64/Bulletpoint_Bullet_Listicon_Shape_Bulletfont_Glyph_Typography_Bullet_Point_Customshape_Wingding_Custom_Seal_Award_Badge_Certificate_Medal_Star-512.png" width="60px">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consetetur dissentias duo at. Est oratio mentitum similique ne, labore molestie philosophia eu vim.</p>
</div>
<div class="prop" id='prop2'>
<img class='diploma' src="https://cdn2.iconfinder.com/data/icons/bullet-points/64/Bulletpoint_Bullet_Listicon_Shape_Bulletfont_Glyph_Typography_Bullet_Point_Customshape_Wingding_Custom_Seal_Award_Badge_Certificate_Medal_Star-512.png" width="60px">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consetetur dissentias duo at. Est oratio mentitum similique ne, labore molestie philosophia eu vim.</p>
</div>
<div class="prop" id='prop3'>
<img class='diploma' src="https://cdn2.iconfinder.com/data/icons/bullet-points/64/Bulletpoint_Bullet_Listicon_Shape_Bulletfont_Glyph_Typography_Bullet_Point_Customshape_Wingding_Custom_Seal_Award_Badge_Certificate_Medal_Star-512.png" width="60px">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consetetur dissentias duo at. Est oratio mentitum similique ne, labore molestie philosophia eu vim.</p>
</div>
<!-- 2nd row of certificates -->
<div class='rowtwo'>
<div class="prop" id='prop3'>
<img class='diploma' src="https://cdn2.iconfinder.com/data/icons/bullet-points/64/Bulletpoint_Bullet_Listicon_Shape_Bulletfont_Glyph_Typography_Bullet_Point_Customshape_Wingding_Custom_Seal_Award_Badge_Certificate_Medal_Star-512.png" width="60px">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consetetur dissentias duo at. Est oratio mentitum similique ne, labore molestie philosophia eu vim.</p>
</div>
<div class="prop" id='prop3'>
<img class='diploma' src="https://cdn2.iconfinder.com/data/icons/bullet-points/64/Bulletpoint_Bullet_Listicon_Shape_Bulletfont_Glyph_Typography_Bullet_Point_Customshape_Wingding_Custom_Seal_Award_Badge_Certificate_Medal_Star-512.png" width="60px">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consetetur dissentias duo at. Est oratio mentitum similique ne, labore molestie philosophia eu vim.</p>
</div>
</div>
</div>
</div>
</body>
</html>
更多推荐
发布评论