Block ".upd-text"

http://jsfiddle.net/nkbEZ/1/

<div class="update-block"> <div class="upd-img"> </div> <div class="upd-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div>

-

 .upd-img { background-color: #ccc; float: left; height: 58px; margin: 0px 7px 0px 0px; width: 58px; } .upd-text { background-color: #ccc; float: left; font: 10px helvetica, sans-serif; width: 230px; }
  • I would have tripled to learn all the ways, never will be superfluous) - chelovechki

2 answers 2

First write what browsers you support. It is very important! Look here Vertical center alignment - 1 method is suitable for IE8 +.

    1. Solution via Flexbox

     .container-fluid { height: 400px; background-color: lightgreen; display: flex; /* Центрируем по вертикали */ align-items: center; /* Центрируем по горизонтали */ justify-content: center; } 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-md-offset-5 text-center "> <div class="play-btn"> <img src="http://elzol.lamusica.com/images/core/play.png" alt="Play"> <p>Some Button</p> </div> </div> </div> </div>

    2. Solution through a pseudo-element with IE 9 support

     .container-fluid { height: 400px; background-color: lightgreen; overflow: hidden; position: relative; text-align: center; } /* Обертка */ .container-fluid:before { content: ''; height: 100%; display: inline-block !important; vertical-align: middle; } /* Блок, который нужно выровнять */ .row { display: inline-block; vertical-align: middle; } 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-md-offset-5 text-center "> <div class="play-btn"> <img src="http://elzol.lamusica.com/images/core/play.png" alt="Play"> <p>Some Button</p> </div> </div> </div> </div>

    3. Solution through absolute positioning

     .container-fluid { height: 400px; background-color: lightgreen; overflow: hidden; position: relative; } .row{ position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); } 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-md-offset-5 text-center "> <div class="play-btn"> <img src="http://elzol.lamusica.com/images/core/play.png" alt="Play"> <p>Some Button</p> </div> </div> </div> </div>

    4. Solution through line-height

     .container-fluid { height: 400px; background-color: lightgreen; overflow: hidden; position: relative; } .row{ line-height: 400px; } 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-md-offset-5 text-center "> <div class="play-btn"> <img src="http://elzol.lamusica.com/images/core/play.png" alt="Play"> <p>Some Button</p> </div> </div> </div> </div>