Vertical align button while it is floating right

Question

I am trying to vertical-align my button but I can't seem to get it to work. Below is the CSS I am working with.

I have tried things like position, vertical-align etc but nothing have worked.

For reference here is an image of what I'm going for:

.item-card {
  display: block;
  font-family: Titillium Web, sans-serif;
  box-shadow: rgba(0, 0, 0, 0.15) 0 5px 20px;
}

.item-card:focus {
  border: #b20c1c solid;
}

.item-card:hover {
  box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
}

.justified-list {
  padding: 5px;
  width: 100%;
  margin: 0;
}


button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

button:hover:active:focus {
  background-color: white;
  color: #61070f;
}

.jl-item {
  padding: 10px 10px 10px;
  display: block;
}

.jl-item:focus {
  border: #61070f solid;
}

.btn-hent-pass {
  color: #b20c1c;
  text-decoration: none;
}

.float {
  max-width: 1200px;
  margin: 0 auto;
}

.float:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}


.last {
  float: right;
}

<div class="item-card float">
  <ul class="justified-list">
    <li class="jl-item float-item" tabindex="0">06/12/2022</li>
    <li class="jl-item float-item" tabindex="0" *ngIf="additionalText.length > 0">1/2</li>
    <li class="jl-item last float-item"><button class="btn-hent-pass" (click)="btnClick.emit()"  ><span style="margin-right: 5px">Get Data</span></button>
    </li>

  </ul>
</div>

So you are expecting the Get Data to be vertically align with other details? — Abin Thaha, Jun 18 '21 at 09:22
@AbinThaha if you look at the image i am hoping that it is kinda vertical aligned in the center between the two details so that the two details kinda row up and have the button on the side (does that make sense)? — Marc Rasmussen, Jun 18 '21 at 09:23
Use this boilerplate - https://codepen.io/hucklesby/pen/ctGnv — thelovekesh, Jun 18 '21 at 09:44
https://stackoverflow.com/questions/25311541/how-to-vertically-align-text-inside-a-flexbox - Duplicate — Abin Thaha, Jun 18 '21 at 09:45

Xulw · Accepted Answer · 2021-06-18T10:08:11.277

2

Div elements are display: "block" which means they take up the whole width of the page.

To fix your arrangement, you will need some sort of a grid layout or a flex container.

I recommend you read this (grid) and this (flex).

UPDATE: Since OP asked, for legacy supported grids you can find more information here

A simple EXAMPLE...

HTML:

<div class="row">
  <ul class="col-1">
    <li>test</li>
    <li>test 2</li>
  </ul>
  <button class="col-2">
    Get Data
  </button>
</div>

CSS:

.row {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
.col-1 {
    width: 40%;
    float: left;
}
.col-2 {
    width: 40%
    float: right;
}

edited Jun 18 '21 at 10:08

answered Jun 18 '21 at 09:35

Xulw

46
3

is there anything i can do without using those two since I need legacy support :( – Marc Rasmussen Jun 18 '21 at 09:37
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods this might do the trick then. – Xulw Jun 18 '21 at 09:39
i am really new to flex / grid is could you give me an example of how I might solve it with those? (sorry if I'm asking too much) – Marc Rasmussen Jun 18 '21 at 09:43
Just updated my answer, check it out. It's a simple example, might not be perfect but it should help your case. – Xulw Jun 18 '21 at 10:09

Vertical align button while it is floating right

1 Answers1