css align equally some item of p tag

Question

This is HTML

.item p {
        display: inline-block;
        padding: 5px;
        font-size: 15px;
    }
.item p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 15ch;
        vertical-align: middle !important;
    }

<div class="item">
        <img src="image.png">
        <p>short namne</p>
        <p>price</p>
</div>

 <div class="item">
        <img src="image.png">
        <p>long name long name long name</p>
</div>

I want the last one will be very right always and the 2nd will be in the middle and the first one will always be left.

currently this is only in line positioned in inline, no align ment. i want alight left, center, right

like i want:

img                                   short name                                      price

but current it showing like this but i dont want like ths:

img short name price

can anyone help to get it done?

Are you looking for `flex`? https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — ΔO 'delta zero', Jul 11 '20 at 11:35
I think flex is the cleanest solution for this. Follow the guide, it's rather simple. If you get stuck, post your code. — ΔO 'delta zero', Jul 11 '20 at 11:41
Does this answer your question? [How can i center site header in nav with random width of suff around?](https://stackoverflow.com/questions/62547625/how-can-i-center-site-header-in-nav-with-random-width-of-suff-around) — ezio4df, Jul 11 '20 at 11:56

score 1 · Accepted Answer · answered Jul 11 '20 at 12:35

You should add justify-content: space-between to .item

.item {
  display: flex;
  justify-content: space-between;
}

.item p {
  padding: 5px;
  font-size: 15px;
}

.item p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 15ch;
  vertical-align: middle !important;
}

<div class="item">
  <img src="image.png">
  <p>short namne</p>
  <p>price</p>
</div>

<div class="item">
  <img src="image.png">
  <p>long name long name long name</p>
  <p></p> <!-- added -->
</div>

score 0 · Answer 2 · answered Jul 11 '20 at 12:38

0

Try this as CSS for item class

.item {
display:flex;
justify-content:space-between;
}

Furthermore, you could have a look at this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more info on CSS flexbox.

answered Jul 11 '20 at 12:38

Abhishek Sharma

617
1
9
17

css align equally some item of p tag

2 Answers2