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属性应该是页面上的唯一值。如果#image个以上，则$estate当前不是唯一的。考虑在class元素上使用<img>属性。

使中心成为嵌入式块

2 个答案: