在div内部始终在页面中间制作div

我在制作响应式图库页面但卡住了。我想要的是让我的.gallery-container在任何宽度中。右侧有一个不等于左侧的空白。有没有什么办法来保持左右两边的差距相等，这样图库div就会始终处于页面中间的任何宽度？在div内部始终在页面中间制作div

如果有，它会帮助我很多

heres my code

这是复杂的，因为我已经给宽度图像，并没有给宽度，同时将一个链接，我不能显示更大的图像。所以，我所需要的是将右侧的一半空间也放在左侧。我现在弄清楚这是js的工作。如果你可以帮助我。

.sj-main-content-inner { 
 
    max-width: 100%; 
 
    display: block; 
 
    overflow: hidden; 
 
    min-height: 300px; 
 
} 
 
h1 { 
 
    font-size: 40px; 
 
    margin-bottom: 20px; 
 
} 
 
.gallery-container { 
 
    margin: 0; 
 
} 
 
ul { 
 
    list-style: square outside; 
 
    /* margin: 0 0 20px 20px; */ 
 
} 
 
.gallery-list { 
 
    list-style: none; 
 
    float: left; 
 
    position: relative; 
 
    margin-right: 25px; 
 
    width: 360px; 
 
    border: 0; 
 
} 
 
li.gallery-list.col-lg-3.col-md-3.col-sm-6.col-xs-12:hover .gallery-title { 
 
    background: rgba(255,255,255,1); 
 
} 
 
.gallery-title { 
 
    position: absolute; 
 
    left: 50%; 
 
    bottom: 30px; 
 
    width: 302px; 
 
    margin-left: -151px; 
 
    text-align: center; 
 
    background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0; 
 
    border: 1px solid #fff; 
 
    padding: 20px 10px; 
 
} 
 

 
.gallery-title h3 { 
 
    font-size: 18px; 
 
    text-transform: none; 
 
    margin-bottom:20px; 
 
} 
 

 
.sj-read-more { 
 
    color: #000; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    padding-bottom: 16px; 
 
    position: relative; 
 
} 
 
.sj-read-more:after { 
 
    content: ''; 
 
    width: 60px; 
 
    height: 1px; 
 
    background: #a4a4a5; 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -30px; 
 
    bottom: 0; 
 
    transition: all ease-out 0.3s; 
 
    -moz-transition: all ease-out 0.3s; 
 
    -webkit-transition: all ease-out 0.3s; 
 
} 
 
.sj-read-more:hover, .sj-read-more:focus, .sj-read-more:active { 
 
    color: #e45f4d; 
 
    text-decoration: none; 
 
} 
 
.sj-read-more:hover:after { 
 
    width: 100%; 
 
    left: 0; 
 
    margin-left: 0; 
 
    bottom: 15px; 
 
    color: #e45f4d; 
 
    transition: all ease-out 0.3s; 
 
    -moz-transition: all ease-out 0.3s; 
 
    -webkit-transition: all ease-out 0.3s; 
 
}

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet"> 
 
<div class="sj-main-container"> 
 
\t <div class="sj-main-content"> 
 
    \t <div class="sj-main-content-inner"> 
 
     
 
     <h1>Foto Gallery</h1> 
 
<ul class="gallery-container"> 
 
          <li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
 
        <br> 
 
      <img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive"> 
 
        <div class="gallery-title"> 
 
         
 
         <h3 class="sj-event-title">About this album for visitor</h3> 
 
         <a class="sj-read-more" title="Your caption here" href="http://upper.dev/swiss-japon/suissejapon110216/?gallery=fotos">View More</a> 
 
         </div> 
 
        </li> 
 
         <li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
 
        <br> 
 
      <img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive"> 
 
         <div class="gallery-title"> 
 
         
 
         <h3 class="sj-event-title">About this album for visitor</h3> 
 
         <a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a> 
 
         </div> 
 
        </li> 
 
        <li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
 
        <br> 
 
      <img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive"> 
 
         <div class="gallery-title"> 
 
         
 
         <h3 class="sj-event-title">About this album for visitor</h3> 
 
         <a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a> 
 
         </div> 
 
        </li> 
 
        <li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
 
        <br> 
 
      <img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive"> 
 
         <div class="gallery-title"> 
 
         
 
         <h3 class="sj-event-title">About this album for visitor</h3> 
 
         <a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a> 
 
         </div> 
 
        </li> 
 
        <li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
 
        <br> 
 
      <img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive"> 
 
         <div class="gallery-title"> 
 
         
 
         <h3 class="sj-event-title">About this album for visitor</h3> 
 
         <a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a> 
 
         </div> 
 
        </li> 
 

 
        </ul> 
 
      
 
    </div> 
 
</div> 
 
</div> 
 
<div class="clearfix"></div>

来源

2016-04-21 Sus Hill

可能重复的解决：http://stackoverflow.com/questions/19691711/best-way-to-centre-dynamic-div-in-middle-of-page – cst1992

@ cst1992它的一种相同，但你的链接不帮我 –

使用此代码：

.sj-main-content-inner { 
    width: 100%; 
    margin: auto; 
    display: block; 
    overflow: hidden; 
    min-height: 300px; 
} 
h1 { 
    font-size: 40px; 
    margin-bottom: 20px; 
} 
.gallery-container { 
    max-width: 800px; 
    height:100%; 
    background: #000; 
    margin:auto; 
} 
ul { 
    list-style: square outside; 
    /* margin: 0 0 20px 20px; */ 
} 
.gallery-list { 
    list-style: none; 
    position: relative; 
    width: 360px; 
    margin:auto; 
    border: 0; 
} 
li.gallery-list.col-lg-3.col-md-3.col-sm-6.col-xs-12:hover .gallery-title { 
    background: rgba(255,255,255,1); 
} 
.gallery-title { 
    position: absolute; 
    left: 50%; 
    bottom: 30px; 
    width: 302px; 
    margin-left: -151px; 
    text-align: center; 
    background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0; 
    border: 1px solid #fff; 
    padding: 20px 10px; 
} 

.gallery-title h3 { 
    font-size: 18px; 
    text-transform: none; 
    margin-bottom:20px; 
} 

.sj-read-more { 
    color: #000; 
    text-decoration: none; 
    text-transform: uppercase; 
    padding-bottom: 16px; 
    position: relative; 
} 
.sj-read-more:after { 
    content: ''; 
    width: 60px; 
    height: 1px; 
    background: #a4a4a5; 
    position: absolute; 
    left: 50%; 
    margin-left: -30px; 
    bottom: 0; 
    transition: all ease-out 0.3s; 
    -moz-transition: all ease-out 0.3s; 
    -webkit-transition: all ease-out 0.3s; 
} 
.sj-read-more:hover, .sj-read-more:focus, .sj-read-more:active { 
    color: #e45f4d; 
    text-decoration: none; 
} 
.sj-read-more:hover:after { 
    width: 100%; 
    left: 0; 
    margin-left: 0; 
    bottom: 15px; 
    color: #e45f4d; 
    transition: all ease-out 0.3s; 
    -moz-transition: all ease-out 0.3s; 
    -webkit-transition: all ease-out 0.3s; 
}

现在为使其与响应值在打他的代码，只是在您的CSS结束添加。仅供参考使用此link

@media only screen and (max-width: 700px) { 
    .gallery-container{ 
     width:500px; 
     margin:auto; 
    } 
}

只要你有一个身体这个位置的中心作为一招：

<selector>{ 
    width:<x>px; 
    margin:auto; 
}

可以使用margin-top和margin-bottom下面margin:auto;指定的顶部和底部边缘，但一旦你使用这个，你不能设置保证金的左边或右边的保证金（但是你不会要求保证金的保留/正确，因为你把div放在中间位置）。

来源

2016-04-21 05:52:12 Rasik

谢谢，但我没有发现任何使用代码的变化。 –

@SusHill我得到了问题给我一分钟我会编辑我的答案 – Rasik

这很复杂，因为我给**宽度**图像，并没有给宽度我不能显示更大的图像，而去链接'a'。所以，我所需要的是将右侧的一半空间也放在左侧。我现在弄清楚这是** js **的工作。如果你可以帮助我。 –

问题通过使用jQuery

$(function() { 
function updateDivPosition() { 
var myWidth = $('.gallery-title').width(), myHeight = $('.gallery-title').height(); 
$('.gallery-title').css({ 
marginLeft: -(parseInt(myWidth, 10)/2) + 'px', 
marginTop: -(parseInt(myHeight, 10)/2) + 'px' 
}); 
} 
updateDivPosition(); // first time set correct position on onload 
$(window).resize(updateDivPosition); // update on window resize 
});

来源

2016-04-22 06:13:27

https://howtodoinjava.files.wordpress.com/2013/04/use-jquery.gif – Aziz

在div内部始终在页面中间制作div

回答

相关问题