CODEWITHSUNDEEP
javascripthtmlcss
wwwww
wwwww

Reputation: 349

Horizontal align link inside div with table-cell property

How can I align text inside div with "next" class to the right? My html code:

<div class="box">
  <div class="navigation prev">
    <a>prev</a>
  </div>
  <div class="rec"><a href="">rec</a></div>
  <div class="navigation next">
    <a>next</a>
  </div>
</div>

And css:

.box {
    display: table;
    margin-right: auto; 
    margin-left: auto; 
    width: 100%;
}

.rec {
    display: table-cell;
    padding: 10px;
    text-align: center;
    background: red;
}

.navigation {
    display: table-cell;
    background: yellow;
}

.nagivation.next > a {
    vertical-align: right;  
}

jsFiddle link: http://jsfiddle.net/zhe6ctkm/

Upvotes: 1

Views: 633

Answers (2)

Joe Wearing
Joe Wearing

Reputation: 147

Just add:

.navigation.next{
  text-align: right;
}

Upvotes: 1

forgivenson
forgivenson

Reputation: 4445

Your title and question don't seem to match, so I'm going to answer your question. You can align the link to the right using text-align: right;.

.box {
  display: table;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}
.rec {
  display: table-cell;
  padding: 10px;
  text-align: center;
  background: red;
}
.navigation {
  display: table-cell;
  background: yellow;
}
.navigation.next {
  text-align: right;
}
<div class="box">
  <div class="navigation prev">
    <a>prev</a>
  </div>
  <div class="rec"><a href="">rec</a>
  </div>
  <div class="navigation next">
    <a>next</a>
  </div>
</div>

Upvotes: 1

Related Questions