JSFiddle链接 - Code
我在这个愚蠢的问题上浪费了一个小时。我已经完成了项目并且有效。我在愤怒中删除了该代码。
我想将图像居中,但图像上方有一个标题。所以,我把它们包裹在一个div中并给了他们一个id [x]。
我尝试了#x
- margin:0 auto
width:50%; margin:auto;
width:50%; margin: 0 auto;
width:50%; margin-left:auto; margin-right:auto;
并将职位更改为亲戚。
什么有用 [没有包裹在div] -
img {
display:block;
height: 200px;
width: 200px;
margin: auto;
}
h1 {
color:blue;
text-align:center;
}
但是这段代码有问题,因为图像是可点击的,图像变成可点击的整个宽度,我不知道为什么。
答案 0 :(得分:0)
block
元素中不能包含inline
元素。图像将被包裹的锚点是inline
元素。当您将子项转换为块元素时,它将使锚占据该行的整个宽度,因为您没有锚点上的宽度设置。
要解决此问题,display:block;
应为display:inline-block;
使用text-align: center
将图像居中。
#test {
text-align: center;
}
img {
display: inline-block;
height: 200px;
width: 200px;
}
h1 {
color:blue;
}
<div id="test">
<h1>Hi, I am guy!</h1>
<a href="#">
<img src="//lorempixel.com/200/200">
</a>
</div>
答案 1 :(得分:0)
如果我理解你的问题,你想要将包裹在div中的标题和图像居中。您不希望div的整个区域只是图像可点击。下面是一个小提琴。
如果以上是正确的,似乎你只需要在img标签周围添加一个标签而不是div本身。
<div>
<h1>Header</h1>
<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200" /></a>
</div>
https://jsfiddle.net/gward90/7s45osxa/
更新:
display:block每次都占用父元素的宽度,正如其他人所说的那样使用内联块。
仅对img标记应用大小,并将显示应用于标记。带有text-align:center的包装器类实际上也在处理img的居中。
这是更新的小提琴: https://jsfiddle.net/gward90/7s45osxa/3/
这也是你的小提琴更新我的建议 https://jsfiddle.net/gward90/aLxecdk6/5/