左側和右側圖像的中心文字

我試圖用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

左側和右側圖像的中心文字

回答

相關問題