Align div vertically in the middle

Question

I'm trying to align some DIVs and failing to succeed.

<div class="row">
    <div class="name"><h3>Some long name in here</h3></div>
    <div class="info">
        <div class="delete">X</div>
        <div class="price">1000.00</div>    
      </div>
</div>

This is what I did so far https://jsfiddle.net/uvo2xdxk/

How can I make the .info div to be vertically aligned inside the row?

Wow, the good old vertically center problem with CSS. Haven't they made it easy yet? — Gottlieb Notschnabel, Jul 29 '15 at 06:53

w3debugger · Accepted Answer · 2015-07-29T07:15:10.517

2

You can achieve this by display: table-cell; Remove float from .name and .info and assign display: table-cell; vertical-align: middle; to them :)

.row {
  display: table;
  width: 450px;
  background-color: yellow;
  border: 1px solid blue;
}
.name {
  background-color: red;
  display: table-cell;
  vertical-align: middle;
}
.delete {
  background-color: green;
  display: inline;
  margin-right: 25px;
}
.price {
  background-color: blue;
  display: inline;
  margin-right: 5px;
}
.info {
  display: table-cell;
  width: 150px;
  vertical-align: middle;
  background-color: ccc;
  border: 1px solid green;
  text-align: right;
}

<div class="row">
  <div class="name">
    <h3>Some long name in here</h3>
  </div>
  <div class="info">
    <div class="delete">X</div>
    <div class="price">1000.00</div>
  </div>
</div>

edited Jul 29 '15 at 07:15

answered Jul 29 '15 at 06:34

w3debugger

2,097
19
23

Info box shall be right aligned as well, price and X shall stick to the right side. – Eugen Jul 29 '15 at 07:10
@Eugen Check now, I've updated the answer – w3debugger Jul 29 '15 at 07:12
yep, that's now perfect! thx – Eugen Jul 29 '15 at 07:14

score 1 · Answer 2 · answered Jul 29 '15 at 06:39

1

https://jsfiddle.net/uvo2xdxk/5/

try this one

.row {
    width: 450px;
    background-color: yellow;
    border: 1px solid blue;
    display:table;
}
.row {
    width: 450px;
    background-color: yellow;
    border: 1px solid blue;
    display:table;
}

assign row display:table; property and its child display:table-cell; and vertical-align:middle; and also remove the float:right; from child

answered Jul 29 '15 at 06:39

Ahmad Asjad

825
1
8
29

No, price shall have 5px from the right side. Both Price and X must be right side aligned. – Eugen Jul 29 '15 at 07:09
just put text-align: right; you can check it now https://jsfiddle.net/uvo2xdxk/9/ – Ahmad Asjad Jul 29 '15 at 07:48

Steevan · Answer 3 · 2015-07-29T07:18:27.150

0

You can check with the below link.

https://jsfiddle.net/uvo2xdxk/7/

      .name {
    background-color: red;
    display: inline;
    float: left;
}

.delete {
    background-color: green;
    display: inline;
     margin-right: 0px;
}

.price {
    background-color: blue;
    display: inline;
    margin-right: 5px;
}

.row {
    width: 450px;
    background-color: yellow;
    border: 1px solid blue;
    display:table;
}

.info {


    height:57px;
    display: table-cell;
    vertical-align:middle;
    background-color: ccc;
    border: 1px solid green;
    top: 25%;
}

edited Jul 29 '15 at 07:18

answered Jul 29 '15 at 06:30

Steevan

826
5
8

This is how it looks on my screen: http://i.stack.imgur.com/MQSgy.png – Gottlieb Notschnabel Jul 29 '15 at 06:55
No, the info box shall be on far right side. – Eugen Jul 29 '15 at 07:08
You can have a look now i Have updated it. Link: https://jsfiddle.net/uvo2xdxk/7/ – Steevan Jul 29 '15 at 07:19

score 0 · Answer 4 · answered Jul 29 '15 at 06:31

0

Add to your .info:

.info{
//...
    position: absolute;              
    top: 50%;                        
    transform: translate(0, -50%)
}

And your .row should set:

position: relative;

I had updated your jsfiddle

answered Jul 29 '15 at 06:31

Neo

1,469
3
23
40

Doesn't work, have a look here: http://i.stack.imgur.com/8NOxL.png – Gottlieb Notschnabel Jul 29 '15 at 06:56
His question about making .info class in middle of .row class. Why you said that doesn't work? @@ – Neo Jul 29 '15 at 06:57
Take a look at my attached screenshot. The red and blue box are vertically aligned to the yellow box, but not to the red one (which is the basic OP intention imho). – Gottlieb Notschnabel Jul 29 '15 at 06:58
The red is .name class, not .row class! kindly check again. the yellow box is .row class. – Neo Jul 29 '15 at 07:00
You're right about that. But OP obviously want's to vertically align yellow, red, blue and green boxes! – Gottlieb Notschnabel Jul 29 '15 at 07:08
I only answer the question "How can I make the .info div to be vertically aligned inside the row?" ^^. Thank you! – Neo Jul 29 '15 at 07:27

score 0 · Answer 5 · answered Jul 29 '15 at 07:14

I have modified your css please check here

.name {
background-color: red;
display: inline;
float: left;
}

.delete {
background-color: green;
display: inline;
 margin-right: 25px;
}

.price {
background-color: blue;
display: inline;
margin-right: 5px;
}

.row {
width: 450px;
background-color: yellow;
border: 1px solid blue;
height: auto;
vertical-align: middle;
overflow:hidden;
position:relative;
}

.info {
float: right;
display: inline-block;
background-color: ccc;
border: 1px solid green;
vertical-align: middle;
position:absolute;
right:0;
transform:translateY(-50%)   ;
top:50%;
}

Please check if it works for you.

Align div vertically in the middle

5 Answers5