1. 首頁
  2. 問答
  3. 圖像在引導程序中未正確對齊傳送帶

圖像在引導程序中未正確對齊傳送帶

2015-07-22 124 views
0

圖像在頁面中心未正確對齊。相反，它會在頁面左側對齊。此外，圖像大小各異。所以，如何讓它修復一個特定的尺寸並使其響應。請檢查下面的代碼是相同的 -圖像在引導程序中未正確對齊傳送帶

#carousel-custom { 
 
    margin: 20px auto; 
 
    width: 100%; 
 
\t height: auto; 
 
} 
 
#carousel-custom .carousel-indicators { 
 
    margin: 10px 0 0; 
 
    overflow: auto; 
 
    position: static; 
 
    text-align: left; 
 
    white-space: nowrap; 
 
    width: 100%; 
 
} 
 
#carousel-custom .carousel-indicators li { 
 
    background-color: transparent; 
 
    -webkit-border-radius: 0; 
 
    border-radius: 0; 
 
    display: inline-block; 
 
    height: auto; 
 
    margin: 0 !important; 
 
    width: auto; 
 
} 
 
#carousel-custom .carousel-indicators li img { 
 
    display: block; 
 
    opacity: 0.5; 
 
} 
 
#carousel-custom .carousel-indicators li.active img { 
 
    opacity: 1; 
 
} 
 
#carousel-custom .carousel-indicators li:hover img { 
 
    opacity: 0.75; 
 
} 
 
#carousel-custom .carousel-outer { 
 
    position: relative; 
 
} 
 

 
<!-- begin snippet: js hide: false -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    <div id="myPicture" class="carousel slide" data-ride="carousel"> 
 
     <ol class="carousel-indicators"> 
 
      <li data-target = "#myPicture" data-slide-to="0" class="active"></li> 
 
      <li data-target = "#myPicture" data-slide-to="1" ></li> 
 
      <li data-target = "#myPicture" data-slide-to="2" ></li> 
 
     </ol> 
 
     <div class="carousel-inner"> 
 
      <div class="item active"> 
 
       <img src="http://placehold.it/250x350" alt="test" class="img-responsive"> 
 
      </div> 
 
      <div class="item"> 
 
      <img src="http://placehold.it/300x350" alt="test" class="img-responsive"> 
 
      </div> 
 
      <div class="item"> 
 
      <img src="http://placehold.it/200x350" alt="test" class="img-responsive"> \t \t \t \t 
 
      </div> 
 
     </div> 
 
     <a class="carousel-control left" href="#myPicture" data-slide="prev"><span class ="icon-prev"></span></a> 
 
\t \t \t <a class="carousel-control right" href="#myPicture" data-slide="next"><span class ="icon-next"></span></a> 
 
\t \t </div>

來源

2015-07-22 Harshit

+0

請提供Plunker例子，所以我可以看到你的問題。我無法重現您的錯誤。你有沒有試圖把它包裝在一個容器和一排？ –

回答

0

我將開始通過消除這些style="max-height:1400px;max-width:900px"

#carousel-custom { 
 
    margin: 20px auto; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
#carousel-custom .carousel-indicators { 
 
    margin: 10px 0 0; 
 
    overflow: auto; 
 
    position: static; 
 
    text-align: left; 
 
    white-space: nowrap; 
 
    width: 100%; 
 
} 
 
#carousel-custom .carousel-indicators li { 
 
    background-color: transparent; 
 
    -webkit-border-radius: 0; 
 
    border-radius: 0; 
 
    display: inline-block; 
 
    height: auto; 
 
    margin: 0 !important; 
 
    width: auto; 
 
} 
 
#carousel-custom .carousel-indicators li img { 
 
    display: block; 
 
    opacity: 0.5; 
 
} 
 
#carousel-custom .carousel-indicators li.active img { 
 
    opacity: 1; 
 
} 
 
#carousel-custom .carousel-indicators li:hover img { 
 
    opacity: 0.75; 
 
} 
 
#carousel-custom .carousel-outer { 
 
    position: relative; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="myPicture" class="carousel slide" data-ride="carousel"> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#myPicture" data-slide-to="0" class="active"></li> 
 
     <li data-target="#myPicture" data-slide-to="1"></li> 
 
     <li data-target="#myPicture" data-slide-to="2"></li> 
 
    </ol> 
 
    <div class="carousel-inner"> 
 
     <div class="item active"> 
 
      <img src="http://placehold.it/2350x1150/000" alt="test" class="img-responsive"> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="http://placehold.it/2350x1150/f00" alt="test" class="img-responsive"> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="http://placehold.it/2350x1150/000" alt="test" class="img-responsive"> 
 
     </div> 
 
    </div> \t <a class="carousel-control left" href="#myPicture" data-slide="prev"><span class ="icon-prev"></span></a> 
 
\t <a class="carousel-control right" href="#myPicture" data-slide="next"><span class ="icon-next"></span></a> 
 

 
</div>

來源

2015-07-22 05:16:34 vanburen

+0

我已經做出了您所提到的更改。此外，圖像大小各異。如何讓所有圖像的圖像大小相似？ – Harshit

0

以下內容添加到你的CSS爲中心對齊圖像

#carousel-custom .carousel-inner > .item > a > img, 
#carousel-custom .carousel-inner > .item > img { 
    margin: 0 auto; 
}

而且轉盤包裝的ID myPicture改變了這種圓盤傳送帶定製的，因爲它是在CSS

使用您已通過在IMG SRC標籤不同大小的圖像。

#carousel-custom { 
 
    margin: 20px auto; 
 
    width: 100%; 
 
\t height: auto; 
 
} 
 
#carousel-custom .carousel-inner > .item > a > img, 
 
#carousel-custom .carousel-inner > .item > img { 
 
    margin: 0 auto; 
 
} 
 
#carousel-custom .carousel-indicators { 
 
    margin: 10px 0 0; 
 
    overflow: auto; 
 
    position: static; 
 
    text-align: left; 
 
    white-space: nowrap; 
 
    width: 100%; 
 
} 
 
#carousel-custom .carousel-indicators li { 
 
    background-color: transparent; 
 
    -webkit-border-radius: 0; 
 
    border-radius: 0; 
 
    display: inline-block; 
 
    height: auto; 
 
    margin: 0 !important; 
 
    width: auto; 
 
} 
 
#carousel-custom .carousel-indicators li img { 
 
    display: block; 
 
    opacity: 0.5; 
 
} 
 
#carousel-custom .carousel-indicators li.active img { 
 
    opacity: 1; 
 
} 
 
#carousel-custom .carousel-indicators li:hover img { 
 
    opacity: 0.75; 
 
} 
 
#carousel-custom .carousel-outer { 
 
    position: relative; 
 
} 
 

 
<!-- begin snippet: js hide: false -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    <div id="carousel-custom" class="carousel slide" data-ride="carousel"> 
 
     <ol class="carousel-indicators"> 
 
      <li data-target = "#carousel-custom" data-slide-to="0" class="active"></li> 
 
      <li data-target = "#carousel-custom" data-slide-to="1" ></li> 
 
      <li data-target = "#carousel-custom" data-slide-to="2" ></li> 
 
     </ol> 
 
     <div class="carousel-inner"> 
 
      <div class="item active"> 
 
       <img src="http://placehold.it/300x350" alt="test" class="img-responsive"> 
 
      </div> 
 
      <div class="item"> 
 
      <img src="http://placehold.it/300x350" alt="test" class="img-responsive"> 
 
      </div> 
 
      <div class="item"> 
 
      <img src="http://placehold.it/300x350" alt="test" class="img-responsive"> \t \t \t \t 
 
      </div> 
 
     </div> 
 
     <a class="carousel-control left" href="#carousel-custom" data-slide="prev"><span class ="icon-prev"></span></a> 
 
\t \t \t <a class="carousel-control right" href="#carousel-custom" data-slide="next"><span class ="icon-next"></span></a> 
 
\t \t </div>

來源

2016-08-25 10:51:09

相關問題

 相關問題