Question

我需要水平居中图像，它应该非常简单，我只使用margin：auto。它可以工作，你可以看到吼叫。

＆＃13;

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

＆＃13;

但是当我用div包裹图像时，它不会放在中心。你可以在这里看到。

＆＃13;

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

＆＃13;

Answer 1

在我看来，你应该以{{1}}为中心。但是您要将图像添加到图像中，以便将图像置于div。

中

Answer 2

试试这个。它对我有用

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

如果它不适用于图像，请尝试使用div。 :)

Answer 3

从班级display:inline-block;移除.img-thumbnail或将其更改为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

4 个答案: