Question

我尝试使用jquery和bootstrap创建一个小导航。我有点卡住对齐图像

我左右两个箭头图像，标题位于中间。

以下是我的代码

<div class="row" style="text-align:center">
  <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_left_48px-128.png" style="float:left">
   <h2>Heading name or title</h2>
  <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-128.png">
</div>

我确实设法设置了一些边距和填充并使其正常工作但是当标题变得更长时，布局也会在响应式视图中失效。

有人可以建议我这样做吗？

谢谢

Answer 1

将h2设为内联块，将vertical-align: middle;应用于图像并从第一张图像中移除浮动：

＆＃13;

h2 {
display: inline-block;
}
img {
vertical-align: middle;
}

＆＃13;

<div class="row" style="text-align:center;">
  <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_left_48px-128.png">
   <h2>Heading name or title</h2>
  <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-128.png">
</div>

＆＃13;

Answer 2

如果你没有任何其他的CSS，这不是你想要的，你可以使用flex：

.row {
   display: flex;
   justify-content: center;
}

从图片中删除float: left。

此外，不再需要text-align:center。

中心文本左侧和右侧的图像

2 个答案: