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个div保持同一直线并居中。我尝试了下面的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

将3个div放在一个div内集中

1 个答案: