1

不得不问这个问题，我觉得自己像个傻瓜。但是我的 html 和 css 有问题。我正在尝试构建一个图标网格，添加图像时一切都很好，但是当我添加文本时，根据某些字体大小，它们会改变框的间距。

无论如何，这就是我所拥有的

<div class="row-fluid">
            <div class="span11 offset1">    
             <ul class="boxes">
                <li class="box">
                    <div class="inside-box">
                        {{ HTML::image('img/icons/Burton.png', 'burton-logo', array('class' => 'img-icon')) }}
                    </div>
                </li>
                <li class="box">
                    <div class="inside-box">
                        {{ HTML::image('img/icons/Male.png', 'burton-logo', array('class' => 'img-icon')) }}
                    </div>
                </li>
                <li class="box">
                    <div class="inside-box">
                        {{ HTML::image('img/icons/powder.png', 'burton-logo', array('class' => 'img-icon')) }}
                        <span class="terrain-text">POWDER</span>
                    </div>
                </li>
                <li class="box">
                    <div class="inside-box">
                        {{ HTML::image('img/icons/camber.png', 'burton-logo', array('class' => 'img-icon')) }}
                        <span class="profile-text">camber</span>
                    </div>
                </li>
                <li class="box">
                    <div class="inside-box">
                        {{ HTML::image('img/icons/flex-8.png', 'burton-logo', array('class' => 'img-icon')) }}
                    </div>
                </li>
                <li class="box">
                    <div class="inside-box">
                        {{ HTML::image('img/icons/Weight.png', 'burton-logo', array('class' => 'img-icon')) }}
                    </div>
                </li>
             </ul>     
           </div>

我正在使用 Bootstrap 和 Laravel，对于那些不熟悉的人来说，{{HTML::image}}只需将其视为一个<img>标签。

的CSS

.box{
  max-width: 250px;
  min-width: 250px;
  max-height: 166px;
  min-height: 166px;
  background-color: #1abc9c;
  display: inline-block;
  margin: 1.5em;
  list-style-type: none;
 }
.inside-box{
  margin: auto;
  text-align: center;
 }
.inside-box h6{
  position: relative;
  font-family: 'BebasNeueRegular';
  margin: auto;
  text-align: center;
}
.inside-box img{
  margin-top: 35px;
}
.terrain-text{
  font-size: 40px;
}
.profile-text{
  font-size: 40px;
}

再说一次，我遇到的问题是，.profile-text如果.terrain-text我将位置设置为绝对，那么间距不会影响它们周围的其他 div，但是我无法使用 margin:auto 将它们居中。有没有办法强制文本不影响它周围任何东西的边距或间距？

4

1 回答 1

2

您想从正常流程中删除元素，因此使用绝对定位是正确的。

要在设置的同时实现居中，left: 50%元素的固定宽度和该宽度的负一半作为左边距。像这样：

.caption {
    position: absolute;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    text-align: center;
}

position: relative您还需要在您的案例元素中设置居中所指的父.box元素。

根据您的小提琴查看工作示例：http: //jsfiddle.net/AeHu2/1/

于 2013-10-04T23:38:00.377 回答