Question

我想将一系列内联块图像居中。这是相关的HTML：

.row{
   display: block;
}
.icon{
   margin: 0 auto;
}

和CSS：

background-size:cover;

结果应该是并排的图标并水平居中。现在他们水平居中，但他们都在彼此之下。

非常感谢帮助，我是网络开发的新手。

感谢。

Answer 1

那是因为div是一个块元素。您必须将图标的HTML元素更改为内联元素，例如span

<span class="icon"> <img src="icon.PNG" alt="Some of the interesting stuff I've worked on."> </span>
<span class="icon"> <img src="icon.PNG" alt="My past experiences."> </span>

或者将显示属性覆盖到图标类的inline-block，如下所示。

.icon {
   display: inline-block;
}

演示： https://jsfiddle.net/z7qfnem4/

Answer 2

试试这个：

<div ng-controller="MainCtrl" class="container">
    <h1>Modal example</h1>
    <button ng-click="toggleModal()" class="btn btn-default">Open modal</button>
    <modal title="Login form" visible="showModal">
        <form role="form">
            <div class="form-group">
                <label for="email">Email address</label>
                <input type="text" class="form-control" ng-model="userid" placeholder="Enter email" />
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" class="form-control" ng-model="pwd" placeholder="Password" />
            </div>
            <button type="submit" ng-click="doLogin()" class="btn btn-default">Submit</button>
        </form>
    </modal>
</div>

这是有效的，因为.row { text-align: center; } .icon { display: inline-block; }将允许display: inline-block;处理块级元素。

对齐内嵌块图像

2 个答案: