CODEWITHSUNDEEP
htmlcss
Angeline Clement
Angeline Clement

Reputation: 33

Problems with text-align : center

This is my CSS.

<style type="text/css"> .chart-legend {
  text-align: center;
}
.chart-legend li {
  list-style-type: none;
  padding-top: 15px;
}
.chart-legend li span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
}
</style>

HTML

<div class="col-xs-7 col-md-6" class="thumbnail">
  <div class="thumbnail" style="width:100%">
    <h4>  <span class="label label-primary">{{ a.title }}</span></h4>
    <div>
      <canvas id="canvas{{loopIndex}}" height="450" width="600"></canvas>
    </div>
    <div id="js-legend" class="chart-legend">
    </div>
  </div>
</div>

Here, the first legend entry gets aligned to the center, whereas the second entry does not go right below the aligned first one, but leaving some space towards the right. Below, is the image. Any help would be much appreciated. Thanks in advance :)

enter image description here

Upvotes: 0

Views: 98

Answers (3)

Angeline Clement
Angeline Clement

Reputation: 33

Thanks all :) But this kinda worked well for me! :)

.chart-legend {
    width: 50%;
    margin: 0 auto;
}

Upvotes: 0

Anand Singh
Anand Singh

Reputation: 2363

They are centered,Because of different length its look like this..
If you want something like this.You should set a padding:somthing according to your need
and if its and for html element you can set left property as well.
Hope this will help you..

Upvotes: 1

paul_durrant
paul_durrant

Reputation: 176

They both look centred to me. They are individually centred, and as they are different lengths, they will not have their left edges aligned with each other.

I suspect you want to let them left align inside a div, and then centre the div.

Also, unless I'm missing something, you haven't included all the HTML necessary to generate your attached image.

Upvotes: 3

Related Questions