1

I have two columns (div { float: left; }, as you may know) in the Bootstrap Structure. The problem is to make the content inside one div go the middle (vertical). So, it doesn't matter the height of the second columns, the second column will always be on the middle.

It is not an line of text. In my case will be an image and a title. Two blocks of elements.

Here's the example: http://jsfiddle.net/almino_melo/L4rK5/.

I tried to put another div inside it with display: table; rule and then another one with display: table-cell; and vertical-align: middle;. But it didn't work.

Danny Beckett
  • 20,529
  • 24
  • 107
  • 134
Almino Melo
  • 341
  • 7
  • 18
  • Please don't link to JSFiddles except to support your question. Your question needs to be answerable without opening any external links; as it stands nobody can answer this without first opening the JSFiddle. – user229044 Mar 21 '13 at 20:18
  • if you have one line of text you can use: http://stackoverflow.com/questions/10061339/how-do-i-align-text-to-the-middle-of-an-element-with-css-in-twitter-bootstrap – Kamil Mar 21 '13 at 20:29
  • I'll try to fix that. – Almino Melo Mar 22 '13 at 23:33

1 Answers1

1

Here's my updated fiddle, http://jsfiddle.net/L4rK5/9/ , it does what you ask but does seem really rather crude, note the change in the html div structure as well as the following css rules.

.text-center{
    width: 100%;
    position: absolute;
    top: 50%;
}
GeorgeV
  • 72
  • 1
  • 9