Put 3 див внутри одного DIV централизованных

Question

У меня есть следующий HTML

<div class="featured-video"> 
    <div class="video-title"> 
     <h1>Title</h1> 
     <p>Subtitle</p> 
     <p>Author</p> 
    </div> 
    <div class="video"> 
     <object width="420" height="315" data="https://www.youtube.com/embed/sewZ2a-LBcQ?feature=player_embedded"> 
     </object> 
    </div> 
    <div class="logo-area"> 
     <img src="http://localhost/artver/images/artver_logo_2010.jpg"/ alt="artver.com" width="298" height="53"> 
    </div> 
</div> 

Я хочу 3 див, чтобы остаться в том же строке, и по центру. Я попробовал код css ниже, чтобы выполнить эту работу, но я не могу достичь того, чего хочу.

.featured-video .video-title { 
    width: 25%; 
    margin: auto; 
} 

.featured-video .video-title, .video { 
    display: inline-block; 
} 

.featured-video .logo-area { 
    display: inline; 
    margin: auto; 
} 

Я новичок в css3. Я пробовал некоторые варианты кода css, но ничего.

Answer 1

Если вы хотите отцентрировать вертикально и разделить место в трех, попробуйте следующее:

Demo JSFiddle

HTML

<!-- the comment is a hack to remove unwanted whitespace --> 
<div class="featured-video"> 
    <div class="video-title"> 
     <h1>Title</h1> 
     <p>Subtitle</p> 
     <p>Author</p> 
    </div><!-- 
    --><div class="video"></div><!-- 
    --><div class="logo-area"></div> 
</div> 

CSS

// cleaner 
* { 
    margin : 0; 
    padding: 0; 
} 

// take all the place 
.featured-video { 
    width: 100%; 
    position: relative; 
} 

.video-title, 
.video, 
.logo-area { 
    position: relative; 
    display: inline-block; // everything in a line 
    width: 33%; // 100/3 
    vertical-align: middle; // center vertically 
} 

.video-title { 
    background : green; 
} 

.video { 
    height: 100px; 
    background: red; 
} 

.logo-area { 
    height : 200px; 
    background: blue; 
    width: 34%; // 100 /3 
} 

more info about the html hack