我需要让图片水平居中，应该很简单，我用margin:auto就可以了。它有效，正如您在下面看到的那样。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<style>
.center_image {
margin: auto;
margin-left: auto;
margin-right: auto;
}
</style>
<style>
</style>
</head>
<body>
<!-- carousel section -->
<div class="container carosel_section" id="carosel_section">
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" style="height: 100%;">
<img style="height: 100%"
class="img-thumbnail img-responsive center_image"
src="https://s-media-cache-ak0.pinimg.com/236x/05/46/63/0546638b58d2d396f97ad69177f104fa.jpg">
</div>
</div>
</div>
</div>
</body>
</html>但是当我用 div 包装图像时，它没有放在中心。正如你在这里看到的。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<style>
.center_image {
margin: auto;
margin-left: auto;
margin-right: auto;
}
</style>
<style>
</style>
</head>
<body>
<!-- carousel section -->
<div class="container carosel_section" id="carosel_section">
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" style="height: 100%;">
<div class="carousel_item_grow_image"
style="height: 100%; width: 100%; background-color: blue;">
<img style="height: 100%"
class="img-thumbnail img-responsive center_image"
src="https://s-media-cache-ak0.pinimg.com/236x/05/46/63/0546638b58d2d396f97ad69177f104fa.jpg">
</div>
</div>
</div>
</div>
</div>
</body>
</html>最佳答案
从 .img-thumbnail 类中删除 display:inline-block; 或将其更改为 display:block;
.img-thumbnail {
display:block;
}
关于css - 用 div 包裹后图像无法居中？网页格式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37225823/