html - 使中心成为嵌入式块

我很难将一个内联块居中。

.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

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

最佳答案

很难确定是否没有看到周围的代码，但是请尝试将#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>属性。