径向饼图（具有固定的宽度和高度）将不会与水平和高度对齐。垂直中心

时间：2017-10-08 08:42:48

标签： html css html5 css3

尽管设置了属性，但圆圈内的文本不会移动到正确的中心，并且径向图本身不会移动到它内部的div的中心。有人有什么不对，以及如何解决这个问题？

/**
 * Card Styles
 */

.card {
  background-color: #fff;
  /* margin-bottom: 1.6rem; */
}

.card__padding {
  padding: 1.2rem;
}

.card__content {
  position: relative;
}


/* card article */

.card__article a {
  text-decoration: none;
  color: black;
}

.card__article p {
  text-align: center;
  text-decoration: none;
  color: black;
}


/*radial progress bar*/

.pie-wrapper {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  margin-left: 50%;
  border: 10px solid #ddd;
  border-radius: 50%;
  margin: 0 auto;
}

.pie-wrapper .pie {
  clip: rect(0, 200px, 200px, 0px);
  height: 200px;
  width: 200px;
  margin: -10px 0 0 -10px;
}

.pie-wrapper .pie .half-circle {
  border: 10px solid #3498db;
  clip: rect(0, 100px, 200px, 0);
  height: 200px;
  position: absolute;
  width: 200px;
  border-radius: 50%;
}

.pie-wrapper .label {
  position: absolute;
  top: 12.5%;
  right: 1%;
  width: 180px;
  height: 180px;
  color: black;
  cursor: default;
  font-size: 2em;
  line-height: 2.5em;
  border-radius: 50%;
}

.pie-wrapper .shadow {
  width: 100%;
  height: 100%;
  border: 20px solid #bdc3c7;
  border-radius: 50%;
}

.pie-wrapper.progress-full .pie {
  clip: inherit;
}

.pie-wrapper.progress-full .pie .right-side {
  display: block;
  -webkit-transform: rotate(220deg);
  -moz-transform: rotate(220deg);
  transform: rotate(220deg);
}

div,
div:before,
div:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
<div class="card radius shadowDepth1">
  <div class="card__content card__padding">
    <article class="card__article">
      <h2><a href="#">Hello world</a></h2>
      <div class="pie-wrapper progress-full">
        <span class="label">2017</span>
        <div class="pie">
          <div class="left-side half-circle"></div>
          <div class="right-side half-circle"></div>
        </div>
      </div>
      <p>Bounjour, tout le monde</p>
    </article>
  </div>
</div>

3 个答案:

答案 0 :(得分：3)

将text-align: center;添加到卡片类

/**
 * Card Styles
 */

.card {
  background-color: #fff;
  text-align: center;
  /* margin-bottom: 1.6rem; */
}

.card__padding {
  padding: 1.2rem;
}

.card__content {
  position: relative;
}


/* card article */

.card__article a {
  text-decoration: none;
  color: black;
}

.card__article p {
  text-align: center;
  text-decoration: none;
  color: black;
}


/*radial progress bar*/

.pie-wrapper {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  margin-left: 50%;
  border: 10px solid #ddd;
  border-radius: 50%;
  margin: 0 auto;
}

.pie-wrapper .pie {
  clip: rect(0, 200px, 200px, 0px);
  height: 200px;
  width: 200px;
  margin: -10px 0 0 -10px;
}

.pie-wrapper .pie .half-circle {
  border: 10px solid #3498db;
  clip: rect(0, 100px, 200px, 0);
  height: 200px;
  position: absolute;
  width: 200px;
  border-radius: 50%;
}

.pie-wrapper .label {
  position: absolute;
  top: 12.5%;
  right: 1%;
  width: 180px;
  height: 180px;
  color: black;
  cursor: default;
  font-size: 2em;
  line-height: 2.5em;
  border-radius: 50%;
}

.pie-wrapper .shadow {
  width: 100%;
  height: 100%;
  border: 20px solid #bdc3c7;
  border-radius: 50%;
}

.pie-wrapper.progress-full .pie {
  clip: inherit;
}

.pie-wrapper.progress-full .pie .right-side {
  display: block;
  -webkit-transform: rotate(220deg);
  -moz-transform: rotate(220deg);
  transform: rotate(220deg);
}

div,
div:before,
div:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
<div class="card radius shadowDepth1">
  <div class="card__content card__padding">
    <article class="card__article">
      <h2><a href="#">Hello world</a></h2>
      <div class="pie-wrapper progress-full">
        <span class="label">2017</span>
        <div class="pie">
          <div class="left-side half-circle"></div>
          <div class="right-side half-circle"></div>
        </div>
      </div>
      <p>Bounjour, tout le monde</p>
    </article>
  </div>
</div>

答案 1 :(得分：0)

.pie-wrapper .label {
     margin: auto;
    position: absolute;
    top: 30%;
    right: auto;
    left: 2px;
    width: 180px;
    height: 180px;
    color: black;
    cursor: default;
    font-size: 2em;
    line-height: 2.5em;
    border-radius: 50%;
}

.card {
  background-color: #fff;
  /* margin-bottom: 1.6rem; */
  text-align:center;
}


/**
 * Card Styles
 */

.card {
  background-color: #fff;
  /* margin-bottom: 1.6rem; */
  text-align:center;
}

.card__padding {
  padding: 1.2rem;
}

.card__content {
  position: relative;
}


/* card article */

.card__article a {
  text-decoration: none;
  color: black;
}

.card__article p {
  text-align: center;
  text-decoration: none;
  color: black;
}


/*radial progress bar*/

.pie-wrapper {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  margin-left: 50%;
  border: 10px solid #ddd;
  border-radius: 50%;
  margin: 0 auto;
}

.pie-wrapper .pie {
  clip: rect(0, 200px, 200px, 0px);
  height: 200px;
  width: 200px;
  margin: -10px 0 0 -10px;
}

.pie-wrapper .pie .half-circle {
  border: 10px solid #3498db;
  clip: rect(0, 100px, 200px, 0);
  height: 200px;
  position: absolute;
  width: 200px;
  border-radius: 50%;
}

.pie-wrapper .label {
     margin: auto;
    position: absolute;
    top: 30%;
    right: auto;
    left: 2px;
    width: 180px;
    height: 180px;
    color: black;
    cursor: default;
    font-size: 2em;
    line-height: 2.5em;
    border-radius: 50%;
}

.pie-wrapper .shadow {
  width: 100%;
  height: 100%;
  border: 20px solid #bdc3c7;
  border-radius: 50%;
}

.pie-wrapper.progress-full .pie {
  clip: inherit;
}

.pie-wrapper.progress-full .pie .right-side {
  display: block;
  -webkit-transform: rotate(220deg);
  -moz-transform: rotate(220deg);
  transform: rotate(220deg);
}

div,
div:before,
div:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
<div class="card radius shadowDepth1">
  <div class="card__content card__padding">
    <article class="card__article">
      <h2><a href="#">Hello world</a></h2>
      <div class="pie-wrapper progress-full">
        <span class="label">2017</span>
        <div class="pie">
          <div class="left-side half-circle"></div>
          <div class="right-side half-circle"></div>
        </div>
      </div>
      <p>Bounjour, tout le monde</p>
    </article>
  </div>
</div>

答案 2 :(得分：0)

我的解决方案涉及以下CSS更改。

.card__article{
  text-align:center;
}

.pie-wrapper {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  margin-left: 50%;
  border: 10px solid #ddd;
  border-radius: 50%;
  margin: 0 auto;
  text-align:center;
}

.pie-wrapper .label {
  position: absolute;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  color: black;
  cursor: default;
  font-size: 2em;
  line-height: 180px;
  border-radius: 50%;
}

首先，您可以设置text-align:center以使内容居中。其次，我使用position:absolute将文本置于内部，并通过将top,right,bottom,left设置为0px，然后将CSS属性line-height设置为180px，使其成为父级的完整维度。父级的内部高度（不包括边框）/** * Card Styles */ .card { background-color: #fff; /* margin-bottom: 1.6rem; */ } .card__padding { padding: 1.2rem; } .card__content { position: relative; } /* card article */ .card__article{ text-align:center; } .card__article a { text-decoration: none; color: black; } .card__article p { text-align: center; text-decoration: none; color: black; } /*radial progress bar*/ .pie-wrapper { display: inline-block; position: relative; width: 200px; height: 200px; margin-left: 50%; border: 10px solid #ddd; border-radius: 50%; margin: 0 auto; text-align:center; } .pie-wrapper .pie { clip: rect(0, 200px, 200px, 0px); height: 200px; width: 200px; margin: -10px 0 0 -10px; } .pie-wrapper .pie .half-circle { border: 10px solid #3498db; clip: rect(0, 100px, 200px, 0); height: 200px; position: absolute; width: 200px; border-radius: 50%; } .pie-wrapper .label { position: absolute; top:0px; bottom:0px; left:0px; right:0px; color: black; cursor: default; font-size: 2em; line-height: 180px; border-radius: 50%; } .pie-wrapper .shadow { width: 100%; height: 100%; border: 20px solid #bdc3c7; border-radius: 50%; } .pie-wrapper.progress-full .pie { clip: inherit; } .pie-wrapper.progress-full .pie .right-side { display: block; -webkit-transform: rotate(220deg); -moz-transform: rotate(220deg); transform: rotate(220deg); } div, div:before, div:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }我们可以将内容集中在一起！

<div class="card radius shadowDepth1">
  <div class="card__content card__padding">
    <article class="card__article">
      <h2><a href="#">Hello world</a></h2>
      <div class="pie-wrapper progress-full">
        <span class="label">2017</span>
        <div class="pie">
          <div class="left-side half-circle"></div>
          <div class="right-side half-circle"></div>
        </div>
      </div>
      <p>Bounjour, tout le monde</p>
    </article>
  </div>
</div>
DataFrame

相关问题
最新问题