在div中创建div总是在页面的中间

时间：2016-04-21 05:37:03

标签： javascript jquery html css twitter-bootstrap-3

我正在制作一个响应式画廊页面，但卡住了。我想要的只是让我的.gallery-container在任何宽度的中间。右侧有一个不等于左侧的间隙。有没有办法保持左右两边的间隙相等，以便画廊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">
	<div class="sj-main-content">
    	<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>

2 个答案:

答案 0 :(得分：0)

使用此代码：

> bb <- c(5,6,7)
> bb
[1] 5 6 7

现在可以使用代码中的值进行响应式播放，并将其添加到CSS结束的位置。供参考使用此link 

    .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;
}

每当你必须将一个身体定位到中心时，请将此作为一个技巧：

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

您可以使用<selector>{ width:<x>px; margin:auto; } 下面的margin-top和margin-bottom来指定上边距和下边距，但是一旦使用此边距，您就无法设置左边距或右边距。（但之后你因为你将div放在中心位置，所以不会要求保证金允许/权利。

答案 1 :(得分：0)

使用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
});
相关问题
最新问题