如何使用内联css将图像移动到div的中心？

Question

如何将图像移动到div的中心？

我尝试使用text-align：center，但它不起作用。

有人能给我一个快速提示吗？非常感谢我:)！

<!-- Logo -->
@if( $user->logo_path)
<img class=" img-rounded" style="text-align:center;" src="/files/logo_path/{{$user->id}}" alt="logo" width="100" >   
@else
<img class=" img-rounded " style="text-align:center;" src="/img/default.PNG" alt="logo"  width="100" >
@endif

Answer 1

您需要将text-align:center属性应用于< img >元素的父div，前提是您的< img >元素没有任何定位。< / p>

并确保< img >元素没有display:block属性，如果确实如此，则将其更改为display:inline

<强> HTML：

<div class="parent_div" style="text-align:center;">
    <!-- Logo -->
    @if( $user->logo_path)
    <img class=" img-rounded" src="/files/logo_path/{{$user->id}}" alt="logo" width="100" >   
    @else
    <img class=" img-rounded " src="/img/default.PNG" alt="logo"  width="100" >
    @endif
</div>

Answer 2

添加块显示和自动水平边距。 text-align只会影响子元素，而不会影响元素的对齐方式。

<img class="img-rounded" style="display:block;margin:0 auto;" src="/files/logo_path/{{$user->id}}" alt="logo" width="100" />

Answer 3

<div class=" col-lg-2" >

<div style="text-align:center">
    <!-- Logo -->
    @if( $user->logo_path)

    <img class=" img-rounded" style="text-align:center;" src="/files/logo_path/{{$user->id}}" alt="logo" width="100" >

    @else

    <img class=" img-rounded " style="text-align:center;" src="/img/default.PNG" alt="logo"  width="100" >

    @endif

</div>

</div>