Question

我正在使用Bootstrap，我想将图像居中，但我不知道该怎么做：/

这是HTML

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"><img src="./img/logo.png" /></a>
    </div>

所以我在导航栏上有一个图像，我想在CSS中尝试将其放在中心

.navbar-brand img{
        width: 83px;
        height: 57px;
        margin-left : 50%;
    }

图像根本不移动

Answer 1

有很多方法可以做到这一点，你可以使用

text-align:center;

以中心元素或

margin-left:auto; 
margin-right:auto;

这是非常基本的CSS，你绝对应该检查documentation。

Answer 2

试试这个：

.navbar-brand img{
    width: 83px;
    height: 57px;
    margin: 0 auto;
}

“margin-left：50％”使图像的左边界居中。 “保证金：0自动;”在我的元素的右侧和左侧说put和相等和最大边距。如果你需要顶部/底部的实际边距，你可以使用4属性方法，如下所示：

margin: 10px auto 20px auto;

居中图像引导程序

2 个答案: