CSSインラインブロックセンター

Question

div要素を中央に配置しようとしています。

例、その左はフローティング、それは中心部にある文句を言わない... - >

任意の提案ですか？

.grid_3 { 
 
    margin-top:20px; 
 
    text-align:center; 
 
    margin-bottom:20px; 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
} 
 

 
.fmcircle_out { 
 
    margin:0 auto; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: rgba(221,221,221,0.3); 
 
    text-align: center; 
 
    opacity: 0.5; 
 
    line-height:10px; 
 
    border-radius:5px; 
 
    border-radius: 100px; 
 
    -moz-border-radius: 100px; 
 
    -webkit-border-radius: 100px; 
 
    -o-border-radius: 100px; 
 
    -webkit-transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    -ms-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
} 
 

 
    .fmcircle_out:hover { 
 
    opacity: 0.8; 
 
    
 
    -webkit-transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    -ms-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
    } 
 
    
 
    .fmcircle_out:hover .fmcircle_in img { 
 
    margin: 30px 25px 25px 25px; 
 
    width: 120px; 
 
    height: 120px; 
 
    
 
    -webkit-transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    -ms-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
    } 
 
    
 

 

 
.fmcircle_in { 
 
    width: 170px; 
 
    height: 170px; 
 
    margin: 15px; 
 
    display: inline-block; 
 
    overflow: hidden; 
 

 
    
 
    border-radius: 85px; 
 
    -moz-border-radius: 85px; 
 
    -webkit-border-radius: 85px; 
 
    -o-border-radius: 85px; 
 
} 
 

 
.fmcircle_in img { 
 
    border: none; 
 
    margin: 53px; 
 
    width: 64px; 
 
    height: 64px; 
 
    
 
    -webkit-transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    -ms-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
} 
 

 
.fmcircle_in span { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    vertical-align: baseline; 
 
    width: 160px; 
 
    background: #fff; 
 
    color: #666666; 
 
    padding: 5px; 
 
    margin: 70px 0 0 0; 
 
    height: 50px; 
 
    line-height:20px; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    letter-spacing: 0.08em; 
 
    text-transform: uppercase; 
 
    float: left; 
 
    position: absolute; 
 
    opacity: 0; 
 

 
    
 
    border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    -o-border-radius: 5px; 
 
    
 
    -webkit-transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    -ms-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
} 
 

 
    .fmcircle_out:hover .fmcircle_in span { 
 
    opacity: 1; 
 
    
 
    -webkit-transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    -ms-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
    } 
 

 

 
}

<div class="grid_3"> 
 
    <div class="fmcircle_out"> 
 
     <a href="/article"> 
 
     <div class="fmcircle_border"> 
 
      <div class="fmcircle_in fmcircle_blue"> 
 
      <span>Opprett artikkel</span><img src="/img/article.png" alt="" /> 
 
      </div> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="grid_3"> 
 
    <div class="fmcircle_out"> 
 
     <a href="/event"> 
 
     <div class="fmcircle_border"> 
 
      <div class="fmcircle_in fmcircle_blue"> 
 
      <span>Opprett et kurs/event</span><img src="/img/event3.png" alt="" /></center> 
 
      </div> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </div>

Answer 1

CSS Flexboxを使用できます。 （私の場合）grid-flexという名前<div>にあなたのグリッドをラップ、およびプロパティ次を与える：

.grid-flex { 
    display: flex; /* Flex Container */ 
    align-items: center; /* Vertically center the content */ 
    jsutify-content: center; /* Horizontally center the content */ 
} 

は、あまりにも<center>タグを削除し、それが廃止されます。

.grid-flex { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.grid_3 { 
 
    margin-top: 20px; 
 
    text-align:center; 
 
    margin-bottom:20px; 
 
} 
 

 
.fmcircle_out { 
 
    margin:0 auto; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: rgba(221,221,221,0.3); 
 
    text-align: center; 
 
    opacity: 0.5; 
 
    line-height:10px; 
 
    border-radius:5px; 
 
    border-radius: 100px; 
 
    -moz-border-radius: 100px; 
 
    -webkit-border-radius: 100px; 
 
    -o-border-radius: 100px; 
 
    -webkit-transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    -ms-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
} 
 

 
    .fmcircle_out:hover { 
 
    opacity: 0.8; 
 
    
 
    -webkit-transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    -ms-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
    } 
 
    
 
    .fmcircle_out:hover .fmcircle_in img { 
 
    margin: 30px 25px 25px 25px; 
 
    width: 120px; 
 
    height: 120px; 
 
    
 
    -webkit-transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    -ms-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
    } 
 
    
 

 

 
.fmcircle_in { 
 
    width: 170px; 
 
    height: 170px; 
 
    margin: 15px; 
 
    display: inline-block; 
 
    overflow: hidden; 
 

 
    
 
    border-radius: 85px; 
 
    -moz-border-radius: 85px; 
 
    -webkit-border-radius: 85px; 
 
    -o-border-radius: 85px; 
 
} 
 

 
.fmcircle_in img { 
 
    border: none; 
 
    margin: 53px; 
 
    width: 64px; 
 
    height: 64px; 
 
    
 
    -webkit-transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    -ms-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
} 
 

 
.fmcircle_in span { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    vertical-align: baseline; 
 
    width: 160px; 
 
    background: #fff; 
 
    color: #666666; 
 
    padding: 5px; 
 
    margin: 70px 0 0 0; 
 
    height: 50px; 
 
    line-height:20px; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    letter-spacing: 0.08em; 
 
    text-transform: uppercase; 
 
    float: left; 
 
    position: absolute; 
 
    opacity: 0; 
 

 
    
 
    border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    -o-border-radius: 5px; 
 
    
 
    -webkit-transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    -ms-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
} 
 

 
    .fmcircle_out:hover .fmcircle_in span { 
 
    opacity: 1; 
 
    
 
    -webkit-transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    -ms-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
    } 
 

 

 
}

<div class="grid-flex"> 
 

 
    <div class="grid_3"> 
 
    <div class="fmcircle_out"> 
 
     <a href="/article"> 
 
     <div class="fmcircle_border"> 
 
      <div class="fmcircle_in fmcircle_blue"> 
 
      <span>Opprett artikkel</span><img src="/img/article.png" alt="" /> 
 
      </div> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="grid_3"> 
 
    <div class="fmcircle_out"> 
 
     <a href="/event"> 
 
     <div class="fmcircle_border"> 
 
      <div class="fmcircle_in fmcircle_blue"> 
 
      <span>Opprett et kurs/event</span><img src="/img/event3.png" alt="" /> 
 
      </div> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </div> 
 

 
</div>

・ホープ、このことができます：

は、以下のスニペットを見てください！

Answer 2

だけでソリューションが親divであなたの2つの要素をラップして、親のdivを中央にあるラッパー

を必要としています。私はdivの中にあなたの二つの要素がwrapperを命名して、wrapper要素を参照し、それを与えた、次は

#wrapper { 
    margin: 0px auto; 
    display: table; 
} 

margin: 0px auto;属性包ま

は、水平方向にコンテナ要素を中心に説明します。

display: table;は、親の `div auto wrapを子どもの幅の合計にします。

実施例

 

 
#wrapper {margin: 0px auto; display:table;} 
 
    .grid_3 { 
 
     margin-top:20px; 
 
     text-align:center; 
 
     margin-bottom:20px; 
 
     display: inline-block; 
 
     margin: 0 auto; 
 
    } 
 

 
    .fmcircle_out { 
 
     margin:0 auto; 
 
     width: 200px; 
 
     height: 200px; 
 
     background: rgba(221,221,221,0.3); 
 
     text-align: center; 
 
     opacity: 0.5; 
 
     line-height:10px; 
 
     border-radius:5px; 
 
     border-radius: 100px; 
 
     -moz-border-radius: 100px; 
 
     -webkit-border-radius: 100px; 
 
     -o-border-radius: 100px; 
 
     -webkit-transition: all 0.2s linear; 
 
     -moz-transition: all 0.2s linear; 
 
     -o-transition: all 0.2s linear; 
 
     -ms-transition: all 0.2s linear; 
 
     transition: all 0.2s linear; 
 
    } 
 

 
     .fmcircle_out:hover { 
 
     opacity: 0.8; 
 
     
 
     -webkit-transition: all 0.2s linear; 
 
     -moz-transition: all 0.2s linear; 
 
     -o-transition: all 0.2s linear; 
 
     -ms-transition: all 0.2s linear; 
 
     transition: all 0.2s linear; 
 
     } 
 
     
 
     .fmcircle_out:hover .fmcircle_in img { 
 
     margin: 30px 25px 25px 25px; 
 
     width: 120px; 
 
     height: 120px; 
 
     
 
     -webkit-transition: all 0.2s linear; 
 
     -moz-transition: all 0.2s linear; 
 
     -o-transition: all 0.2s linear; 
 
     -ms-transition: all 0.2s linear; 
 
     transition: all 0.2s linear; 
 
     } 
 
     
 

 

 
    .fmcircle_in { 
 
     width: 170px; 
 
     height: 170px; 
 
     margin: 15px; 
 
     display: inline-block; 
 
     overflow: hidden; 
 

 
     
 
     border-radius: 85px; 
 
     -moz-border-radius: 85px; 
 
     -webkit-border-radius: 85px; 
 
     -o-border-radius: 85px; 
 
    } 
 

 
    .fmcircle_in img { 
 
     border: none; 
 
     margin: 53px; 
 
     width: 64px; 
 
     height: 64px; 
 
     
 
     -webkit-transition: all 0.2s linear; 
 
     -moz-transition: all 0.2s linear; 
 
     -o-transition: all 0.2s linear; 
 
     -ms-transition: all 0.2s linear; 
 
     transition: all 0.2s linear; 
 
    } 
 

 
    .fmcircle_in span { 
 
     margin: 0; 
 
     padding: 0; 
 
     border: 0; 
 
     vertical-align: baseline; 
 
     width: 160px; 
 
     background: #fff; 
 
     color: #666666; 
 
     padding: 5px; 
 
     margin: 70px 0 0 0; 
 
     height: 50px; 
 
     line-height:20px; 
 
     text-align: center; 
 
     font-weight: bold; 
 
     letter-spacing: 0.08em; 
 
     text-transform: uppercase; 
 
     float: left; 
 
     position: absolute; 
 
     opacity: 0; 
 

 
     
 
     border-radius: 5px; 
 
     -moz-border-radius: 5px; 
 
     -webkit-border-radius: 5px; 
 
     -o-border-radius: 5px; 
 
     
 
     -webkit-transition: all 0.2s linear; 
 
     -moz-transition: all 0.2s linear; 
 
     -o-transition: all 0.2s linear; 
 
     -ms-transition: all 0.2s linear; 
 
     transition: all 0.2s linear; 
 
    } 
 

 
     .fmcircle_out:hover .fmcircle_in span { 
 
     opacity: 1; 
 
     
 
     -webkit-transition: all 0.2s linear; 
 
     -moz-transition: all 0.2s linear; 
 
     -o-transition: all 0.2s linear; 
 
     -ms-transition: all 0.2s linear; 
 
     transition: all 0.2s linear; 
 
     } 
 

 

 
    }

 

 
<div id="wrapper"> 
 
    <div class="grid_3"> 
 
    <div class="fmcircle_out"> 
 
     <a href="/article"> 
 
     <div class="fmcircle_border"> 
 
      <div class="fmcircle_in fmcircle_blue"> 
 
      <span>Opprett artikkel</span><img src="/img/article.png" alt="" /> 
 
      </div> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="grid_3"> 
 
    <div class="fmcircle_out"> 
 
     <a href="/event"> 
 
     <div class="fmcircle_border"> 
 
      <div class="fmcircle_in fmcircle_blue"> 
 
      <span>Opprett et kurs/event</span><img src="/img/event3.png" alt="" /></center> 
 
      </div> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

あなたは親のdivを作成し、text-align: center;

CSS

.container { 
    text-align: center; 
} 

を追加することによって、それらをセンタリングすることができます

.container { 
 
    text-align: center; 
 
} 
 

 
.grid_3 { 
 
    margin-top:20px; 
 
    text-align:center; 
 
    margin-bottom:20px; 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
} 
 

 
.fmcircle_out { 
 
    margin:0 auto; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: rgba(221,221,221,0.3); 
 
    text-align: center; 
 
    opacity: 0.5; 
 
    line-height:10px; 
 
    border-radius:5px; 
 
    border-radius: 100px; 
 
    -moz-border-radius: 100px; 
 
    -webkit-border-radius: 100px; 
 
    -o-border-radius: 100px; 
 
    -webkit-transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    -ms-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
} 
 

 
    .fmcircle_out:hover { 
 
    opacity: 0.8; 
 
    
 
    -webkit-transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    -ms-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
    } 
 
    
 
    .fmcircle_out:hover .fmcircle_in img { 
 
    margin: 30px 25px 25px 25px; 
 
    width: 120px; 
 
    height: 120px; 
 
    
 
    -webkit-transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    -ms-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
    } 
 
    
 

 

 
.fmcircle_in { 
 
    width: 170px; 
 
    height: 170px; 
 
    margin: 15px; 
 
    display: inline-block; 
 
    overflow: hidden; 
 

 
    
 
    border-radius: 85px; 
 
    -moz-border-radius: 85px; 
 
    -webkit-border-radius: 85px; 
 
    -o-border-radius: 85px; 
 
} 
 

 
.fmcircle_in img { 
 
    border: none; 
 
    margin: 53px; 
 
    width: 64px; 
 
    height: 64px; 
 
    
 
    -webkit-transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    -ms-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
} 
 

 
.fmcircle_in span { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    vertical-align: baseline; 
 
    width: 160px; 
 
    background: #fff; 
 
    color: #666666; 
 
    padding: 5px; 
 
    margin: 70px 0 0 0; 
 
    height: 50px; 
 
    line-height:20px; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    letter-spacing: 0.08em; 
 
    text-transform: uppercase; 
 
    float: left; 
 
    position: absolute; 
 
    opacity: 0; 
 

 
    
 
    border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    -o-border-radius: 5px; 
 
    
 
    -webkit-transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    -ms-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
} 
 

 
    .fmcircle_out:hover .fmcircle_in span { 
 
    opacity: 1; 
 
    
 
    -webkit-transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    -ms-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
    } 
 

 

 
}

<div class="container"> 
 
    <div class="grid_3"> 
 
    <div class="fmcircle_out"> 
 
     <a href="/article"> 
 
     <div class="fmcircle_border"> 
 
      <div class="fmcircle_in fmcircle_blue"> 
 
      <span>Opprett artikkel</span><img src="/img/article.png" alt="" /> 
 
      </div> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="grid_3"> 
 
    <div class="fmcircle_out"> 
 
     <a href="/event"> 
 
     <div class="fmcircle_border"> 
 
      <div class="fmcircle_in fmcircle_blue"> 
 
      <span>Opprett et kurs/event</span><img src="/img/event3.png" alt="" /></center> 
 
      </div> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

あなたは親のdivでそれらをラップし、それをwidthを与え、その後、そのようにそれにmargin: 0 auto;を設定する必要が2つのdivを一元化するために探している場合：

HTMLを：

<div class="grid_wrapper"> 
    <div class="grid_3"> 
     <div class="fmcircle_out"> 
     <a href="/article"> 
      <div class="fmcircle_border"> 
      <div class="fmcircle_in fmcircle_blue"> 
       <span>Opprett artikkel</span><img src="/img/article.png" alt="" /> 
      </div> 
      </div> 
     </a> 
     </div> 
    </div> 

    <div class="grid_3"> 
    <div class="fmcircle_out"> 
     <a href="/event"> 
     <div class="fmcircle_border"> 
      <div class="fmcircle_in fmcircle_blue"> 
      <span>Opprett et kurs/event</span><img src="/img/event3.png" alt="" /></center> 
      </div> 
     </div> 
     </a> 
    </div> 
    </div> 
</div> 

CSS：

.grid_wrapper { 
    width:500px; //change this to whatever you want 
    margin: 0 auto; 
}