Simple CSS div vertical align

[johnsmith153]

I have a row of 3 boxes:

 

<div style="float:left;width:50px;height:50px;text-align:center;">hello</div> x3

 

I just need to vertically align everything inside the div (images, text, buttons - anything inside)

[kyme]

try this sir..

 

//html

<div id="sample">

 

    images, text, btns etc..

 

</div>

 

// css code

#sample

{

 

  width:50px;

}

 

[johnsmith153]

Are you taking the piss?

 

Put exactly this in html:

<div style="float:left;width:50px;height:50px;text-align:center;">hello</div>
<div style="float:left;width:50px;height:50px;text-align:center;">hello</div>
<div style="float:left;width:50px;height:50px;text-align:center;">hello</div>

 

And see if you can align them vertically.

 

Not with your crap certainly.

 

Vertical align meaning top to bottom, by the way, just incase you can't tell the difference between horizontal and vertical.

 

[svivian]

Don't be so rude, that's not how to get questions answered...

 

I'm not sure exactly what you want. Your three boxes all have the same height so they will be aligned vertically...

[nadeemshafi9]

ur a very rude person ur lucky i even bother with you

 

<div style="float:left;width:50px;height:50px;text-align:center;">hello</div>
<div style="clear: both"></div>
<div style="float:left;width:50px;height:50px;text-align:center;">hello</div>
<div style="clear: both"></div>
<div style="float:left;width:50px;height:50px;text-align:center;">hello</div>

[johnsmith153]

If you read the first post, it states I need to align vertically text, buttons etc. INSIDE the div.

("I just need to vertically align everything inside the div (images, text, buttons - anything inside)")

 

If you only read my second post I can uderstand why svivian and nadeemshafi9 were either confused or thought I wanted them stacked on top or some other method

 

Kyme is an idiot. Read my first post and his reply. He is obviosuly not trying to help. I appreciate all help, but this was a waste of time.

 

So if anybody can tell me how to align vertically 'inside' a div I do/will appreciate it.

 

vertical-align: middle doesn't work.

 

I need it to display like this

  xxxxxxxxxx  xxxxxxxxxx  xxxxxxxxxx

  x          x  x          x  x            x

  x  img    x  x          x  x    A    x

  x  img    x  x    A    x  x    A    x

  x  img    x  x          x  x    A    x

  x          x  x          x  x            x

  xxxxxxxxxx  xxxxxxxxxx  xxxxxxxxxx

 

As now, my code does this

  xxxxxxxxxx  xxxxxxxxxx  xxxxxxxxxx

  x  img    x  x    A    x  x    A    x

  x  img    x  x          x  x    A    x

  x  img    x  x          x  x    A    x

  x          x  x          x  x            x

  x          x  x          x  x            x

  xxxxxxxxxx  xxxxxxxxxx  xxxxxxxxxx

 

 

 

 

 

 

[dropfaith]

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html check here its what you need

[johnsmith153]

Great, all done, thanks.

 

My final solution was to add line-height: and set the same value for line-height: as is set for height.

 

Also, for images and buttons, I needed to add   after them as they didn't respond otherwise.

 

Crazy, but it all works.

 

Thanks for all your help.

[crembz]

johnsmith153 is an ignorant, antisocial, turd munching useless waste of space. Go do some research for yourself shit for brains instead of asking questions for simple problems and then insulting nice people because you were too freaking dumb to write your question properly. Somebody should slap your dump arse you piece of shit!!!

 

Go crawl back into that hole you came out of fuckspawn!!

[haku]

Gotta love these people that ask for free help, then get pissy when something doesn't work.

[nexprograms]

Hi.. I found the solution:-

 

When a div being float styled, vertical-align will not work. To solve this problem,

we need to add inner div for every div. Then set the inner div to style width, height, vertical-align,

and display as write below.

 

<div style="float:left;width:50px;height:50px;text-align:center;"><div style="width:50px;height:50px;vertical-align: middle;display:table-cell;">hello</div></div>

[haku]

Besides the fact that this thread is a year and a half old, your solution will not work in Internet Explorer.