divun önyükleme sütunu nasıl hizalanır?

this is my demo page ve hangi üst sınıfın mutlak olduğu benim divumun içinde önyükleme sütunu var ama benim sütunum karusel değil .. bunu yapmak için?divun önyükleme sütunu nasıl hizalanır?

ve ben ne yapmak istediğini görüntü eklemek

Üst mutlak

<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Bootstrap 101 Template</title> 

    <!-- Bootstrap --> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body> 
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 

    <div class="myDiv "> 
      <div class="container"> 
      <div class="row"> 
       <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">left column..</div> 
       <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">right column..</div> 
      </div> 
      </div> 
    </div> 
    <div class="item active"> 
     <img src="http://www.aurumhotels.com.tr/resimler/normal/2015-08/FirmaArkaBanner1_4BuFjQUcCp3yALBpDUxLsignature.jpg" alt="..."> 
    </div> 
    <div class="item"> 
     <img src="http://www.aurumhotels.com.tr/resimler/normal/2015-12/FirmaArkaBanner1_Isrgao2xv47jrJVBsf2Hfirmaarkabanner2.png" alt="..."> 
    </div> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    </body> 
</html>

css

.my-slider{ 
     background:#FFF; 
     position: absolute;; 
     top:0; 
     z-index:1; 
} 
.item img { 
     width:100%; 
}

kaynak

2016-04-14 ani_css

.myDiv{ 
    position: absolute; 
    background: #fff; 
    z-index:1; 
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
    width: 50%;

}

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

kaynak

2016-04-14 17:03:16 RocketsRockets

ilginç arka planı taşımak ve:

http://codepen.io/nikmahes/pen/GZxYpB

–

@ani_css gibi çalışıyor, bu merkezde harika çalışıyor. Ancak önyükleme kabı 1170 piksel genişliğini kaybeder. Konteynerin 1170 piksel genişliğini ve merkezini mi tutmayı bekliyordunuz? – imvain2

-1

olduğundan

html benim yapısı görebilirsiniz konumlandırılmış, 10 genişliğinde verilmesi gerekir Çocuklarının konteyner içinde ortalanması için% 0. Benim-sürgüsünü kabul edeceğim gerçekten myDiv geçerli:

Bunu yapmanın

.myDiv{ 
     background:#FFF; 
     position: absolute; 
     top:0; 
     z-index:1; 
     width:100%;  
}

kaynak

2016-04-14 17:03:03 imvain2

bu deneyin ve (vw düzeltmek Viewport genişliği) ihtiyacınıza göre. onun çok iyi ama çalışan great..on codepen

left: 0; 
top: 0; 
right: 0;

ve .myDiv .container

kaynak

2016-04-14 17:11:43

bu yüzden teşekkürler ama proje çapraz tarayıcı olmalı, yani çalışması gerekiyor 9+ :)) –

.myDiv{ 
     position: absolute; 
     background:#fff; 
     z-index:1; 
     width:50vw; 
     left:25vw; 
}

.myDiv bazı değişiklikler gerektirir Sizin, bu özellikleri eklemek Benim masaüstüm

kaynak

2016-04-14 17:16:56

divun önyükleme sütunu nasıl hizalanır?

cevap

İlgili konular