css - 2 个内联图像 - 1 个居中和 1 个使用 Bootstrap

Question

在居中图像上使用 center-block 会强制第二个图像下降到下方: - 像这样放置 2 个元素的最佳做法是什么？我想我可以将标题分成 3 列，然后将第二张图片拉到第三张图片中。

<header class="" id="top" role="banner">
<div class="container" >
<nav class="navbar navbar-default">

<img src="<?php echo $folder;?>img/header.png" alt="" class="center-block"/>
<img src="<?php echo $folder;?>img/main_logo.png" alt="" class="pull-right" />


</nav>  
</div>
<hr>
</header>

Answer 1

对于图像，我会使用 display: inline-block;，对于父级，我会使用 text-align: center;。第二张图片得到 float: right; 。请注意，第一张图片将在左边框和第二张图片之间的空间居中，如果这是您的目标的话。

nav {
    text-align: center;
}

nav img {
    display: inline-block;
}

nav img + img {
    float: right;
}

http://jsfiddle.net/a9Lave1x/2/