首页 文章

使中心成为内联块

提问于
浏览 次
0

我很难将内联块中心化 .

.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

我不想在子列图像和文本等内部进行't want to make center element'只想制作一个中心主列 . 这是页面的图像

html css

2 回答

  • 0

    内联块的作用就像它们是文本的单词一样，在父项上使用 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
}
    回复于
  • 0

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

    回复于

相关问题