div text align center issues inside loop

Question

I have a div with text-align:center.

Inside the div I have a span.

In the fiddle you can see the output 1,2 3, etc.

It is float:left, so I get the output it in one line.

But inside the div it is not obeying the style, text-align:center. If I remove float left, the outputs will be in different lines but the text will be aligned center.

I need all my output in one line and it should aligned to the center of the div.

function TodoCtrl($scope) {
  $scope.col = ['1', '2', '5', '8'];
  $scope.cols = ['1', '2', '5', '8'];
}

.ll {
  text-align: center;
}
p {
  float: left;
}

<div ng-repeat="c in size">
  <span ng-repeat="m in p.size" ng-if="m == c.id">
    <a href="" ng-click="select_size(c.id)" 
       ng-class="{gvborder : allsels == c.id}">
       <p style="text-align:center; float:left"> {{c.name}} &nbsp;&nbsp;</p>
    </a>
  </span>
</div>

My fiddle is here

Your question is very vague and your fiddle doesn't explain what exactly you wish to center. However, this might be help you: http://howtocenterincss.com/ — Maneesh, Jun 20 '16 at 15:07
I don't see any elements with `text-align:center;` in your example — APAD1, Jun 20 '16 at 15:15
You need to include the relevant code in your question, not as a link to an external resource. Links go dead, and SO questions live a very long time to help aid people that may have the same question later. Please include the code in your question. — Michael Gaskill, Jun 20 '16 at 16:07

score 1 · Answer 1 · edited May 23 '17 at 11:58

1

You just need to set your <span> to display:block before doing text-align:center; since <span> is display: inline by default.

Here's another answer that goes into more detail about this topic.

edited May 23 '17 at 11:58

Community

1
1

answered Jun 20 '16 at 15:17

cbierman

400
5
15

div text align center issues inside loop

1 Answers1