用 div 包裹后无法居中图像？ html

Question

我需要水平居中，应该很简单，我就用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>

Answer 1

我认为您应该 div 将图像居中。但是您将 class 添加到图像，因此您将图像置于 div.

的中心

Answer 2

试试这个。对我有用

.center_image {
  position:relative;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

如果它在图像上不起作用，请尝试 div。 :)

Answer 3

从 class .img-thumbnail 中删除 display:inline-block; 或将其更改为 display:block;

.img-thumbnail {
  display:block;
}

Answer 4

快速修复，只需将 text-align:center 添加到 div 即可；

<div class="carousel_item_grow_image" style="height: 100%; width: 100%; background-color: blue; text-align:center">

这是演示https://jsfiddle.net/wxpjorfw/

用 div 包裹后无法居中图像？ html

cant center image after wrapping it with div ? html

html

css

center