CODEWITHSUNDEEP
htmlcss
Mick Marosky
Mick Marosky

Reputation: 21

Verticall align of div

I need to align the red triangle in the middle of the div with the text, but I made several unsuccessful attempts.

http://jsfiddle.net/aq9Laaew/207191/

 <div class="container">
  <div class="row">
    <div class="col-2 opt ">teste
    testetestete
    uaoijpajpa
    ]jpiajpiajpo
    piajpajpoçajp

    dada
    dadad
    hjaojpaj
    kpakák
    pjapp--´q
    oiaijaçlma
    kjpoakpa-k
    </div>
      <div class="col wrp p-0">
        <div class="tri"></div>
      </div> 
  </div>
</div>

Css

.opt {
      border: 1px solid red;
      color: red;
      display: block;
    }
    .wrp {
      padding-top: 50%;
    }
    .tri {
      width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-left: 12px solid red;
        border-bottom: 15px solid transparent;
    }

Upvotes: 0

Views: 72

Answers (3)

aislamfaisal
aislamfaisal

Reputation: 111

There is a simple way, just add margin: auto 0; to your .wrp class (It will take automatic margin from top and bottom according to your content) and remove padding-top: 50%. As you have added a border on .col class so it will show the border if you want you can remove the border. here is the code:

    .wrp {
      margin: auto 0;
      border: 0;
    }

Try it now: https://jsfiddle.net/aq9Laaew/207289/

Upvotes: 2

Sameer
Sameer

Reputation: 383

Try it now,

http://jsfiddle.net/aq9Laaew/207230/

I have added 

  position: absolute;
  top:50%;
  transform:translateY(-50%);

to the .tri class

Upvotes: 0

Potatoes
Potatoes

Reputation: 310

You could add the following property to class tri:

top: 50%;
position: relative;
transform: translateY(-50%);

position: relative allow other property that could shift the element from his normal position

top: 50% would set the vertical position of the triangle to 50% from its container.

transform: translateY(-50%) shift the triangle up by half of his own height

Upvotes: 0

Related Questions