使中心成為嵌入式塊

Question

我很難將一個內聯塊居中。

.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

內聯塊的工作方式就像是文字一樣，請使用text-align: center於父級，它將行居中。

#main-wrapper {
  text-align: center;
}

我不太確定為什么要使用內聯塊，如果只希望#main-column居中，請使用：

#main-column {
  width: 85%;
  margin: 0 auto;
  // note there's no display: inline-block here
}

Answer 2

很難確定是否沒有看到周圍的代碼，但是請嘗試將#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屬性應該是頁面上的唯一值。 如果$estate超過一個，則#image當前不是唯一的。 考慮改為在<img>元素上使用class屬性。