Search code examples
htmlcssthymeleaf

Text field is not aligned in center with date field inside DIV

I'm doing something with Thymeleaf and CSS but I hope someone can help me because it's more CSS-related I guess.

I think this is the most important part so I will not post code that I also have inside this div class="transaction-group">

   <div class="transaction-group" th:each="singleGroup  : ${transactionGroup}">
    <div class="date-balance">
        <h1 id="left" th:text="${singleGroup .date}"></h1>
        <h2 id="right">Balance <span th:text="${singleGroup .monthBalance}"></span></h2>
    </div>

That is final example using thymeleaf that I just want to show for context, and this one is changed with pure HTML: https://codepen.io/sjankdev/pen/gOdoQwZ

Just change the view so you can actually resize it and you will see that date and balance, or left text and right text are not aligned when page is resized, they are probbaly not aligned even on full screen just a bit so its hard to see it, but when I resize page I can clearly see that they are not aligned on same line.

Solution

  • Try using display:flex. Add below rules to .data-balance class and it should work.

      display:flex;
  align-items:center;
  justify-content:space-between;