0
我需要水平居中圖像，它應該很簡單，我只是使用margin：auto。它可以工作，正如你所看到的那樣。無法中心圖像包裝與div後？ html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
\t href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
\t integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
\t crossorigin="anonymous">
<style>
.center_image {
\t margin: auto;
\t margin-left: auto;
\t margin-right: auto;
}
</style>
<style>
</style>
</head>
<body>
\t <!-- carousel section -->
\t <div class="container carosel_section" id="carosel_section">
\t \t <div id="myCarousel" class="carousel slide">
\t \t \t <!-- Indicators -->
\t \t \t <ol class="carousel-indicators">
\t \t \t \t <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
\t \t \t \t <li data-target="#myCarousel" data-slide-to="1"></li>
\t \t \t \t <li data-target="#myCarousel" data-slide-to="2"></li>
\t \t \t </ol>
\t \t \t <!-- Wrapper for slides -->
\t \t \t <div class="carousel-inner" role="listbox">
\t \t \t \t <div class="item active" style="height: 100%;">
\t \t \t \t \t <img style="height: 100%"
\t \t \t \t \t \t class="img-thumbnail img-responsive center_image"
\t \t \t \t \t \t src="https://s-media-cache-ak0.pinimg.com/236x/05/46/63/0546638b58d2d396f97ad69177f104fa.jpg">
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
</body>
</html>但是當我wrapp與DIV的圖像，它不設置在中心。正如你可以在這裏看到的。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
\t href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
\t integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
\t crossorigin="anonymous">
<style>
.center_image {
\t margin: auto;
\t margin-left: auto;
\t margin-right: auto;
}
</style>
<style>
</style>
</head>
<body>
\t <!-- carousel section -->
\t <div class="container carosel_section" id="carosel_section">
\t \t <div id="myCarousel" class="carousel slide">
\t \t \t <!-- Indicators -->
\t \t \t <ol class="carousel-indicators">
\t \t \t \t <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
\t \t \t \t <li data-target="#myCarousel" data-slide-to="1"></li>
\t \t \t \t <li data-target="#myCarousel" data-slide-to="2"></li>
\t \t \t </ol>
\t \t \t <!-- Wrapper for slides -->
\t \t \t <div class="carousel-inner" role="listbox">
\t \t \t \t <div class="item active" style="height: 100%;">
\t \t \t \t \t <div class="carousel_item_grow_image"
\t \t \t \t \t \t style="height: 100%; width: 100%; background-color: blue;">
\t \t \t \t \t \t <img style="height: 100%"
\t \t \t \t \t \t \t class="img-thumbnail img-responsive center_image"
\t \t \t \t \t \t \t src="https://s-media-cache-ak0.pinimg.com/236x/05/46/63/0546638b58d2d396f97ad69177f104fa.jpg">
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
</body>
</html>
@nevermind感謝您的評論。但他們不是。請再看一遍。我已將圖像更改爲顯示差異的較小圖像。 – david
是的，我現在看到。把：文本對齊：中心包裝div（carousel_item_grow_image，我認爲） – sinisake
有時它是最簡單的解決方案正確的一個：P – AlFra