Question

在居中的图像上使用中心块会强制第二个图像落在下面： - 这样定位2个元素的最佳做法是什么？我想我可以将标题划分为3列，并将第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/

2个内联图像 - 1个居中，1个右侧使用Bootstrap

1 个答案: