5

中央に配置されたコンテンツを保持できるレスポンシブCSS3サークルを作成する方法を探しています。
サークルに関しては、この質問でいくつかの良い情報を見つけました。残念ながら、これではコンテンツを中央に配置できないようです。

この質問も、中央に配置する必要がある画像であるにもかかわらず、私の質問と非常によく似ています。私の場合、オプションではない背景画像を使用しているので、このオプションは私にとっても機能しません。

私がこれにどのように取り組むことができるかについて何か考えがありますか？
もちろん画像を使用することもできますが、CSSの方がはるかにエレガントです。

4

3 に答える 3

5

多くの追加ラッパーを必要とする純粋なCSS

更新：元の投稿（私が削除した）は、レスポンシブデザインを探していたという事実を見逃していました。あなたが参照しているレスポンシブサークルの質問に対する私の答えに基づいて、すべてのCSS3ブラウザで機能するようです。フィドルを参照してください。

HTML（5レベルのラッパーが必要です。このhtmlには1つの円のみを表示します）

<div class="circles">
    <div>
      <div>
        <div>
          <div>
            <!-- BEG Content -->
            All types of content (see fiddle)
            <!-- END Content -->
          </div>
        </div>
      </div>
    </div>
    <!-- ditto the above 3 more times -->
</div>

CSS

.circles{
    margin:0px auto;
}
.circles > div {
    overflow:hidden;
    float:left;
    width:auto;
    height:auto;
    position: relative;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -khtml-border-radius: 50%;
    background:#eee;
}

.circles > div > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.circles > div > div > div {
    display: table;
    width: 100%;
    height: 100%;
}
.circles > div > div > div > div {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

@media (max-width: 320px)
{
    .circles > div {padding: 50%;}
}

@media (min-width: 321px) and (max-width: 800px)
{
    .circles > div {padding: 25%;}
}

@media (min-width: 801px)
{
    .circles{width:800px}
    .circles > div {padding: 12.5%;}
}
于 2013-01-12T14:22:09.637 に答える
1

コンテンツの高さが固定されていて、CSSメソッドが必要な場合は、次のプロパティを使用して、円環の内側にあるものに適用します。

margin: auto; /*will center the element*/
position: relative;
top: 50%;
margin-top: - [here insert the height of the element if you know in advance / 2]px
于 2013-01-12T14:47:53.913 に答える
1

円を回転させたかったので、受け入れられた答えは私にはうまくいきませんでした。これは行います：

HTML

<div class="mycircle">
  <div class="mycontent">
    <span>TEXT</span>
  </div>
</div>

CSS

.mycircle {
  width: 30%; 
  height: 0;
  padding: 15% 0; //padding top & bottom must equal width 
  border-radius: 50%;
  -moz-border-radius: 50%; 
  -webkit-border-radius: 50%; 
  background: #dedede; 
}
.mycontent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
.mycontent:before {
  content: '';
  vertical-align: middle;
  display: inline-block;
  width: 0;
  height: 100%;
}

.mycontent span {
  vertical-align: middle;
  display: inline-block;
}
于 2013-07-05T07:03:17.730 に答える