Question

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

但是这段代码有问题，因为图像是可点击的，图像变成可点击的整个宽度，我不知道为什么。

Answer 1

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>

Answer 2

如果我理解你的问题，你想要将包裹在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/

基本的CSS定位中心

2 个答案: