CODEWITHSUNDEEP
htmlcss
M Kenyon II
M Kenyon II

Reputation: 4274

Trying to line up the bottom text in a div

I'm trying to get the text in this <div> to line up. Either get the text to be vertical-align: middle or along the bottom. Right now, the 'Due by:' text ends up lined up with the top of the 'Finish Task' button.

<div style="display: inline-block;width: 100%;height: 25px;vertical-align: middle;">
    <div style="display: inline-block;vertical-align: middle;">
        Due by: 02/12/2016
    </div>
    <div style="display: inline-block; 
            float: right; margin-right: -10px; vertical-align: middle;">
        <div class="eed-button-grn button-space submit_link">Finish Task</div>
    </div>
</div>

Fiddler Link

Upvotes: 1

Views: 59

Answers (3)

elmarko
elmarko

Reputation: 923

Vertically align with flexbox. It's the easiest way. 

<div style="display: flex; justify-content: center; flex-direction: column; width: 100%; background: red; height: 250px;">
     <div class="cnt">
          <div style="display: inline-block;">
               Due by: 02/12/2016
          </div>
          <div style="display: inline-block; float: right; margin-right: 10px; vertical-align: middle;">
               <div class="eed-button-grn button-space submit_link">Finish Task</div>
          </div>
     </div>
</div>

Upvotes: 1

Oscar Franco
Oscar Franco

Reputation: 6260

A quick solution, add line-height property:

<div style="display: inline-block;vertical-align: middle; line-height:28px;">
  Due by: 02/12/2016
</div>

Not sure if it is the optimal/best way to do it though.

Here is the fiddle

Upvotes: 1

Jerry
Jerry

Reputation: 884

Try applying the following styles to the text element:

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

Upvotes: -1

Related Questions