html - 使中心成为内联 block

Question

我很难将内联 block 居中。

.content {
    width: 85%;
    margin: 0 auto;
}

#main-wrapper {
    text-align: center;
    display: inline-block;
}

#main-column {
    width: 85%;
    margin: 0 auto;
}

#image {
    width: 150px !important;
    height: 150px !important;
}

HTML

@foreach($estates as $estate)
    <div id="main-wrapper">
         <div id="main-column">
               <div class="sub-column">
                    <img id="image" src="{{$estate->image}}">
               </div>
               <div class="sub-column">
                    Content
               </div>
               <div class="sub-column">
                    Buttons
               </div>
         </div>
     </div>
@endforeach

我不想让中心元素的内部子列图像和文本等。只想做一个中心主列。这是页面的图片

Answer 1

如果没有看到周围的代码，很难确定，但尝试移动 #main-wraper和 #main-column @foreach 中的元素循环。

<div id="main-wrapper">
    <div id="main-column">
        @foreach($estates as $estate)
            <div class="sub-column">
                <img id="image" src="{{$estate->image}}">
            </div>
            <div class="sub-column">
                Content
            </div>
            <div class="sub-column">
                Buttons
            </div>
        @endforeach
    </div>
</div>

请注意 id属性应该是页面上的唯一值。 #image当前不是唯一的，如果有多个 $estate .考虑使用 class <img> 上的属性元素代替。