Question

http://tinkerbin.com/ojXJuQfl

i managed to use instructions from another user and centered text vertically, but it doesn’t allow me to center the whole thing vertically. i figured if i put the text in it’s own div, it would do it, but it didn’t. how can i center a PARAGRAPH next to the arrow?

vertical aligning CSS is very confusing…

CSS

#arrow {
       width:33px;
       height:25px;
       background-image:url('http://i.imgur.com/26tbf.png');
       margin-left:55px;
       background-position:0 50%;
       float:left;
       height:100%;
       background-repeat:no-repeat;
 } 

#bulletwrap {
       border:1px solid black;
       width:325px;
       height:75px;
 } 

#text {
      background-position:0 50%;
      line-height:75px;    
 } 

HTML

<div id="bulletwrap"><div id="arrow"></div><div id="text">This is some longer text that needs to be centered next to the arrow grouped together</div></div>

Answer 1

Vertical centering something can be rather difficult. I have an alternate proposal to your solution. It is a bit of a hacky solution, but as far as I know it’s the best and most effective.

You will need to have your #bulletwrap div (or any other container type element) behave as a table, and your #text (paragraph or div, it doesn’t matter) as a table cell. This will allow you to use vertical-align: middle; for the #text element, centering it vertically.

This is the important css:

#bulletwrap {
  border:1px solid black;
  width:325px;
  height:75px;
  display: table; /*set your container to behave as table*/
} 

#text {
  display: table-cell; /*set your text to behave as table cell*/
  vertical-align: middle; /*... and vertically align it*/
}

Here it is in action http://tinkerbin.com/jSocLUGX

I hope that was clear enough. If you have any further questions or feel your question was not really answered, please do not hesitate to ask.