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

我试图用jquery和bootstrap创建一个小导航。林有点卡住对齐图像左侧和右侧图像的中心文字

我有2个箭头图像到我的左侧和右侧的标题在中心。

下面是我的代码

<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>

我没有管理设置一些利润率和填充和得到它的工作，但是当标题变得更长布局休息也它不工作的意见作出响应性能。

有人可以请建议我一个正确的方法来做到这一点？

感谢

来源

2017-04-01 LiveEn

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

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

从图像中删除float: left。

此外，没有必要text-align:center更多。

来源

2017-04-01 20:35:46

充分利用h2直列块，适用于vertical-align: middle;图像和从所述第一图像中移除浮子：

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

<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>

来源

2017-04-01 21:21:41 Johannes

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

回答

相关问题