1

I'm trying to align an input text and all the buttons you see in the following image to the bottom of "My text".

The bottom should be the bottom of the M not the bottom of the y. Edit: as a second choice, all the elements can be aligned to the vertical center of `my text'.

Buttons 3 and 4 have to be aligned to the right.

enter image description here

If there isn't enough space, My text should remain on the first line, and the rest should go into a new line.

I tried using float: right with no luck, because button 3 and 4 go to the right upper edge. I tried displaying them inline, but that way they are not aligned on the right. I don't know what else to try.

My current code is the following, which gives me bottom alignment with Firefox but not with Chrome (as you can see, buttons 3 and 4 are not aligned with buttons 1 and 2)

I hope someone can help me.

div.inline { 
display: inline-block;
}
   
<div id="titleBar">
<div class="inline" style="position: relative; width: 100%;">
 <div class="inline" style="font-weight: bold; font-size: 2em; color: #D00000;">My text</div>
 <div class="inline">
  <form>
   <div class="inline">
    <input type="text" style="width: 16em" value="input text">&nbsp;
   </div>
   <div class="inline">
    <input type="submit" value="button 1"></input>
    <button>button 2</button>
   </div>
  </form>
 </div>

 <div style="position: absolute; bottom: 0px; right: 0px;">
  <button >button 3</button>
  <button >button 4</button>
 </div>
</div>
</div>
cdarwin
  • 4,141
  • 9
  • 42
  • 66
  • 1
    Flexbox can line them up. Check out the Answer to this question [https://stackoverflow.com/questions/22429003/how-to-right-align-flex-item](https://stackoverflow.com/questions/22429003/how-to-right-align-flex-item) – JBrad Jan 24 '19 at 22:54
  • Thank you, it worked. I had found another solution with flexbox that didn't work. I'm using now `display: flex; align-items: center; ` to vertically align the items. I hope flexbox is supported by mobile devices too – cdarwin Jan 24 '19 at 23:19

0 Answers0