Question

我有一个div，里面有一些带有链接的图像。问题是链接占据了列的整个宽度而不仅仅是图像。也许是因为我使用了自动保证金？我该如何解决？感谢。

SASS：

.anuncio{
    padding-bottom: 25px;

    img{
      display: block;
      margin: 0 auto;
      padding-bottom: 25px;
    }
}

查看：

<div class="anuncio">

    <a href="#">{!! HTML::image('images/one.png', '', array('width' => '180')) !!}</a>

    <a href="#">{!! HTML::image('images/two.svg', '', array('width' => '240')) !!}</a>

</div>

Answer 1

你能试试吗？

.anuncio{
    padding-bottom: 25px;
    a{
       padding-bottom: 25px;
    }
    img{
      display: block;
      margin: 0 !important;
    }
}

Answer 2

我使用css中的 align-items 和 justify-content 以及视图中每个元素的 divs 解决了这个问题。

SASS：

.anuncio{
    padding-bottom: 25px;
    align-items: center;
    justify-content: center;

    img{
      padding-bottom: 25px;
    }
}

查看：

<div class="anuncio">

    <div><a href="#">{!! HTML::image('images/one.png', '', array('width' => '180')) !!}</a></div>

    <div><a href="#">{!! HTML::image('images/two.svg', '', array('width' => '240')) !!}</a></div>

</div>

Laravel 5 css：仅链接图像而不是列的整个宽度

2 个答案: