Question

我的图像也是一个链接。但是，可点击区域比实际图像宽。显示img作为内联确实有效，但是这个解决方案将图像移动到左边，我需要它居中。我尝试使用margin: auto，text-align: center和align:middle在实际的html文件中居中图像，但没有运气。

我知道其他几个人也问了同样的问题，但他们的解决方案对我没有帮助。

/*Section2*/
#section2 {
  line-height: 1.8em;
  height: auto;
  margin-top: 2em;
  margin-bottom: 2em;
}
#section2 h2 {
  font-size: 2em;
  font-weight: bolder;
  text-align: center;
  padding: 1em 2.5em 0;
}
#section2 p {
  text-align: center;
  padding: 0 2.5em 0.5em;
  font-family: 'Open Sans', sans-serif;
}
#section2 img {
  padding: 0 0.2em 2em;
  display: inline;
  width: 40%;
  height: 40%;
  margin: auto;
}
#section2 a {
  display: inline;
}

<div id="section2">
    <a href="http://wordpress.bysuonpera.com/">
        <img src="/Users/jonashansen/Desktop/hjemmeside/img/wordpress.jpg">
    </a>
</div>

Answer 1

如果您熟悉bootstrap，那么您可以将图像放在col中并给它一个偏移量并使其水平居中，href链接也将与您输入的列一样宽。它不会占用整个空间。看看我写的代码，尝试一次：

 <div  id="section2" class="row">
    <a class="col-md-6 col-md-offset-3 text-center col" href="http://wordpress.bysuonpera.com/"><img src="http://www.navipedia.net/images/a/a9/Example.jpg"/></a>
</div>

Answer 2

你可以删除填充，图像的边距使高度自动，这将为你做

<强>更新

如果您想对齐img并使其全宽可点击，请将标记设为块并指定text-align: center

#section2 a {
   display: block;
   text-align: center;
}

＆＃13;

#section2 {
	line-height: 1.8em;
	height: auto;
	margin-top: 2em;
	margin-bottom: 2em;
}

#section2 h2 {
	font-size: 2em;
	font-weight: bolder;
	text-align: center;
	padding: 1em 2.5em 0;
}

#section2 p {
	text-align: center;
	padding: 0 2.5em 0.5em;
	font-family: 'Open Sans', sans-serif;
}

#section2 img {
	padding: 0;
	display: inline;
	width: 40%;
    height: auto;
    margin: 0;
}

#section2 a {
   display: block;
   text-align: center;
}

＆＃13;

<div  id="section2">
		<a href="http://wordpress.bysuonpera.com/"><img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg"></a>
</div>

＆＃13;

Answer 3

这是因为您要为图像添加填充：

#section2 img {
  padding: 0;
  display: inline-block;
  width: 20%;
  height: 40%;
  margin: 0;
}

#section2 a {
  /*display: inline;*/
}

<div  id="section2">
  	<a href="http://wordpress.bysuonpera.com/"><img src="http://i.istockimg.com/file_thumbview_approve/21348043/3/stock-illustration-21348043-star-burst-and-sunbeam-background.jpg"></a>
  </div>

href比位于左侧的图像或图像宽

3 个答案: