CODEWITHSUNDEEP
htmlcss
k c
k c

Reputation: 211

How do you center align inline elements inside an html div?

I have a bunch of spans inside a fixed width div. I would like to let the spans flow inline as they do by design. However, I would like them to be centered on each line instead of being left-aligned. How could I achieve this using css?

<div>
         <span>text1</span>
         <span>text2</span>
         <span>text3</span>
         <span>text4</span>
         <span>text5</span>
         <span>text6</span>
         <span>text7</span>
         <span>text8</span>
         <span>text9</span>
         <span>text10</span>
</div>

Upvotes: 0

Views: 927

Answers (2)

neo108
neo108

Reputation: 5246

Just set text-align: center to the div <div class="dummy">. Something like this...

.dummy {
    width: 500px;
    text-align: center;
}

jsFiddle DEMO

Hope this is what you are after.

Upvotes: 4

Joey
Joey

Reputation: 26

Set a width for the div containing the spans and do this:

span {
        width: 100%;
        text-align: center;
        float: left;
        clear: both;
    }

Upvotes: 0

Related Questions