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 に答える