I am very new to programming and ruby on rails so bear with me! I resized a picture of mine into a thumbnail sized photo and I want to upload it into my header that appears on every page of my website. I placed the image in my apps/assets/images
folder. My problem is that the icon doesn't appear correctly in the header, instead of to the right of Lions Wrestling it appears below it.
This is the code that I have:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Lions Wrestling
<div class="thumbnail">
<%= image_tag "Lions.jpg"%>
</div>
</a>
Thanks!
Apart from bootstrap-specific styling, you will probably be having an issue with display: inline
& display: inline-block
:
CSS
<div class="navigation">
<div class="image"><img src="http://elonmuskblog.files.wordpress.com/2012/03/elon-musk-blog-photo.jpg" height="150"></div>
<div class="text">Your text here</div>
</div>
.navigation { display: block; }
.navigation > div { display: inline-block; }
.image { vertical-align: middle; }
You'll need to make sure your image div has a display
property of inline-block
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.