CODEWITHSUNDEEP
csssemantic-ui
Himanshu Yadav
Himanshu Yadav

Reputation: 13585

Semantic UI: Setting the column in center not it's content

Tried to use this but it is aligning the content too.

<div class="center aligned ui grid">
  <div class="ten wide column">
         <h2 class="ui header">
            Your Blog
            <div class="sub header">A blog application implemented with Semantin-UI/SpringBoot/MongoDB/.</div>
       </h2>

        <div class="ui divided list" th:each="post : ${posts}">
            <div class="item">
                <div class="content">
                    <a class="header" th:text="${post.title}">Title</a>
                    <div id="blogId" th:text="${post.id}" style="display: none">Id</div>
                    <div class="description" th:text="${post.content}">Content</div>
                    <div class="ui divider"></div>
                </div>
            </div>
        </div>
            <a href="/createPost">NewPost</a>
  </div>
  </div>

Upvotes: 0

Views: 4708

Answers (1)

wafield
wafield

Reputation: 94

Just add left aligned to your inner column <div>:

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

Source: http://semantic-ui.com/collections/grid.html#specifying-alignment

Upvotes: 2

Related Questions