CODEWITHSUNDEEP
semantic-ui
Tarik
Tarik

Reputation: 475

Is there a class or elements to center list item contains icon?

I'm trying to center list items which contain an icon.

I was able to center text by adding a parent div container but not the icon!

<div class="ui center aligned container">
        <div class="ui list">
                    <div class="item">
                      <i class="large call icon"></i>
                      <div class="content">
                        <a class="header">About me</a>
                      </div>
                    </div>
                    <div class="item">
                      <i class="large mail icon"></i>
                      <div class="content">
                        <a class="header">Portfolio</a>
                      </div>
                    </div>
                    <div class="item">
                      <i class="large chat icon"></i>
                      <div class="content">
                        <a class="header">Services</a>
                      </div>
                    </div>

                    <div class="item">
                        <i class="large chat icon"></i>
                        <div class="content">
                          <a class="header">Resume</a>
                        </div>
                      </div>
                      <div class="item">
                          <i class="large chat icon"></i>
                          <div class="content">
                            <a class="header">Blog</a>
                          </div>
                        </div>
                        <div class="item">
                            <i class="large chat icon"></i>
                            <div class="content">
                              <a class="header">Content</a>
                            </div>
                          </div>

                  </div>
        </div>

Is there a way to achieve that using semantic-ui only?

Upvotes: 1

Views: 23

Answers (1)

Tarik
Tarik

Reputation: 475

I was able to achieve the alignment by adding two parents

<div class="ui center aligned grid">
<div class="fourteen wide column">
 ...
</div>
</div>

Upvotes: 1

Related Questions