david david - 6 months ago 7
HTML Question

cant center image after wrapping it with div ? html

i need to center image horizontally , it should be very simple, i just use margin:auto. and it works , as you can see bellow.



<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>





but when i wrapp the image with div, it isn't placed in center. as you can see here.



<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>




Answer

remove display:inline-block; from class .img-thumbnail or change it to display:block;

.img-thumbnail {
  display:block;
}
Comments