Vertical-alignment text in Bootstrap's List Group - css

Question

I've tried to vertical align text in Bootstrap's list group (inside of tag li) with display: table-cell; line-height: 50px; vertical-align: middle;, but it doesn't work at all. Help me with it, please. ;)
<div class="row">
<div class="col-md-12">
<ul class="list-group">
<li class="list-group-item clearfix">Byl jsi pořádně prošťouchán uživatelem <strong>hakys</strong>.
<form action="my_pokes.php" method="post">
<span class="pull-right">
<button class="btn btn-success" name="poke_hakys">Šťouchnout zpět</button>
<button class="btn btn-danger" name="delete_hakys">Smazat šťouchnutí</button>
</span>
</form>
</li> </ul>
</div>
</div>

Answer 1

You can do something like this, and then you won't need to override the list-group-item style..
<div class="row">
<div class="col-md-12`">
<ul class="list-group">
<li class="list-group-item text-right">
<span class="pull-left">
Byl jsi pořádně prošťouchán uživatelem <strong>hakys</strong>.</span>
<form action="my_pokes.php" method="post" class="form-inline">
<span>
<button class="btn btn-success" name="poke_hakys">Šťouchnout zpět</button>
<button class="btn btn-danger" name="delete_hakys">Smazat šťouchnutí</button>
</span>
</form>
</li>
</ul>
</div>
</div>
Demo: http://codeply.com/go/6H4wBABPGw

Answer 2

I made some changes to your code. The biggest change is that instead of setting up one 12 span column I divided it into three. this makes it easier for laying out items in bootstrap.
Let me know if this helps you.
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-5">
<ul class="list-group">
<li class="list-group-item clearfix">Byl jsi pořádně prošťouchán uživatelem <strong>hakys</strong>.</div>
<div class="col-md-4">
<form action="my_pokes.php" method="post"> <span class="pull-right">
<button class="btn btn-success" name="poke_hakys">Šťouchnout zpět</button>
<button class="btn btn-danger" name="delete_hakys">Smazat šťouchnutí</button>
</span>
</form>
</li>
</ul>
</div>
</div>
</div>