Question

所以这是我的代码：

＆＃13;

.hej {
  width: 100%;
  height: 1000px;
  background-color: yellow;
  text-align: center;
}
.circlem {
  display: inline-block;
  min-width: 15%;
  white-space: nowrap;
}
.circlem:before {
  border-radius: 50%;
  width: 100%;
  padding-bottom: 100%;
  margin: 15px .5px;
  background: white;
  content: '';
  display: inline-block;
  vertical-align: middle;
  padding-bottom: 0vw;
  width: 30vw;
  height: 30vw;
}
.circlem p {
  display: inline-block;
  font-size: 40px;
  font-size: 3.5vw;
  margin: 0 -.5em 0 -100%;
  padding: 0;
  vertical-align: middle;
  white-space: normal;
  width: 100%;
  margin: 0 0 0 -15vw;
  width: 15vw;
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="hej">
  <div class="circlem">
    <p>
      How Rules
    </p>
  </div>
</div>

＆＃13;

我不知道为什么，但更大的字体大小会导致文本移到右侧：_：我的代码应该改变什么？我使用bootstrap制作导航栏。我没有编辑身体部分。 On the image you can see, how it moved to the right side

以下是codepen.io的链接：http://codepen.io/anon/pen/gPByPx

Answer 1

我已经清理并合并了你的css代码：

＆＃13;

       .hej
    {
        width:100%;
        height:1000px;
        background-color:yellow;
        text-align:center;
    }

    .circlem{
      display: inline-block;
      border-radius: 50%;
      margin: 15px auto;
      background: white;
      padding-bottom: 0vw;
      width: 30vw;
      height: 30vw;
      min-width: 15%;
      white-space: nowrap;
    }

    .circlem p {
      position:relative;
      font-size: 3.5vw;
      margin: 0;
      padding: 0;
      line-height: 30vw;
      white-space: normal;
      width: 30vw;
      height: 30vw;
    }

＆＃13;

<div class="hej">
        <div class="circlem">
                    <p>
                How Rules
                    </p>
</div>
</div>

＆＃13;

Answer 2

只需在段落中添加transform: translateX(-50%)即可。

＆＃13;

.hej {
  width: 100%;
  height: 1000px;
  background-color: yellow;
  text-align: center;
}
.circlem {
  display: inline-block;
  min-width: 15%;
  white-space: nowrap;
}
.circlem:before {
  border-radius: 50%;
  width: 100%;
  padding-bottom: 100%;
  margin: 15px .5px;
  background: white;
  content: '';
  display: inline-block;
  vertical-align: middle;
  padding-bottom: 0vw;
  width: 30vw;
  height: 30vw;
}
.circlem p {
  display: inline-block;
  font-size: 40px;
  font-size: 3.5vw;
  margin: 0 -.5em 0 -100%;
  padding: 0;
  vertical-align: middle;
  white-space: normal;
  width: 100%;
  margin: 0 0 0 -15vw;
  width: 15vw;
  transform: translateX(-50%);
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="hej">
  <div class="circlem">
    <p>
      How Rules
    </p>
  </div>
</div>

＆＃13;

Answer 3

我不知道你是否有实际的理由按照你的方式构建它，但是有一种更简单的方法可以做到这一点。在我看来，你是在思考它。怎么样？

   .hej {
      width: 100%;
      height: 1000px;
      background-color: yellow;
      text-align: center;
      padding:20px;
    }

    .circlem p {  
        border-radius: 50%;
        width:220px;
        height:220px;
        background:#fff;
        margin:40px auto;
        display: inline-block;
        font-size: 40px;
        font-size: 3.5vw;
        padding:50px;
    }

请参阅DEMO

Answer 4

.hej {
width:100%;
/*height:1000px;*/
background-color:yellow;
text-align:center;}

.circlem {
display: inline-block;
min-width: 15%;
white-space: nowrap;}

.circlem:before {
border-radius: 50%;
width: 100%;
padding-bottom: 100%;
margin: 15px .5px;
/*background: white;*/
content: '';
display: inline-block;
vertical-align: middle;
padding-bottom: 0vw;
width: 30vw;
height: 30vw;}

.circlem p {
display: inline-block;
font-size: 40px;
font-size: 3.5vw;
margin: 0 -.5em 0 -100%;
padding: 0;
vertical-align: middle;
white-space: normal;
width: 100%;
margin: -105vh auto 0;
/* width: 15vw; */
position: relative;}

试试这个

如何将文本置于响应圈的中间，（文本也是如此响应）？[仅限css / html]

4 个答案: