Question

我有什么

.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 / s / box则没有。另外，我希望row2中的2个div相对于上面的3个div保持居中。

Answer 1

由于您要居中的区块为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>

Answer 2

也许是这样的？

.value-props{
   text-align:center;
}

http://codepen.io/anon/pen/dNayKj

当水平滚动时，如何将内部div保持在包含div的中心

2 个答案: