Am trying to align a logo and a menu (to the left and the other to the right), i used class="pull-left" for my logo and class="pull-right" for my menu icon (because i use bootstrap) but when applied this class attribute to this contents (which are inside a div tag) my menu icon always goes to the bottom.
I will like to know why i do encounter this, and also how to fix this.
below is an image of how i want my alignments to look like;
use css float property
float-left {
float: left;
}
float-right {
float: left;
}
or you can use flex-box too.
Related
I'm making an html email and I have some text and an image in a flexbox. I want to right align the image irrespective of the amount of text on the left. I used "justify-content: space-between" initially which would normally do the trick but that's not working with G-Mail. Any alternatives?
Hope you are using the table format for the e-mail part. And FYI, Gmail does not support flexbox.
To make the image align to the right, apply text-align: right; in the parent element of the img tag.
I suppose you are trying to align the text and the image on the same line but image will align on the left and the image on the right...
Try this:
h3 /* (or whatever element you are using for your text) */
{
text-align:left;
display:inline;
}
img{
display:inline; float right;
}
I am beginner and learning web development and I have got one svg logo, and I want to set it up vertically-center of the nav bar. I am not sure how to do that properly.
Issue: the image/svg is going out of the navbar-brand.
Image has a logo class where I have put a width like below:
.logo {
width: 145px;
}
Question: Why does my logo is going out of the parent navbar brand class. Also, I tried vertical-align: middle but this also does not help. Can someone guide me how to put svg logo, so that it remains vertically-center and do no go out of parent div.
Attempt 1:
vertical-align: middle in logo class
Attempt 2:
center-block in navbar-brand
In this JSFiddle there is an example to vertically center the logo
Vertically center logo
line-height: 50px;
Simple question: How do you float an image without having it stick to the far left, or far right?
Whenever I use float:left - it just sticks completely on the left side.
I tried using margin, but that just makes the object bigger and messes up the layout for other objects.
Thanks!
Put a set width on the containing box so the size wont change, then float the image left with margin?
Add margin-left: 20px; to .youtube. Set it to whatever value you like:
.youtube {
margin-left: 20px; /* set to whatever value you choose */
float: left;
height: 360px;
width: 640px;
clear:both;
}
Side note, a lot of your HTML was broken. For example, missing </header> closing tag, your <img /> tag wasn't closed properly, and you were also missing </div> closing tags.
In addition, as for W3C standards, you shouldn't have a div within a li tag (I didn't fix this). Use a <span> instead and set it to display:block if you need it to perform like a div.
http://jsfiddle.net/vw52e/3/
Say that I have images contained inside a list, as below.
<ul>
<li>
<img src="http://placehold.it/250x400">
</li>
<li>
<img src="http://placehold.it/250x200">
</li>
<li>
<img src="http://placehold.it/250x200">
</li>
<li>
<img src="http://placehold.it/250x400">
</li>
</ul>
This fiddle shows what the setup would look like on a page. Is it possible using only CSS to make the second and third list items take up space to the right of the first? If not possible within a list structure, what changes would I need to make to the HTML to make it possible? The solution would ideally work no matter how many images were present in the list.
edit: the image below shows the sort of thing that I'm looking for. The left is what I currently have (as shown in the fiddle), but I would like to have it look like the right hand side of the image.
You can use the float property and set li to float: left;
ul li {
float: left;
}
DEMO
I'd warmly recommend the following article about floats
Eplanation:
Adding a float property to these images basically sets their behavior to the following:
They will get block display type ( display: block; )
They won't take up as much space as block elements (or li) would normally do, but they will shrink to:
a size explicitly set to them (if there is such)
to a size that fits their !non-floated! content
If the floated element has space near a previously floated element, it will be displayed near it (on the same "row") rather then displaying it on the next "line" as block elements normally behave
On the other hand
I guess you are more like after a mosaic layout, to cover your available space regardless of image sizes.
This you can only accomplish with js. One of the libs I'd recommend are masonry
http://jsfiddle.net/VpcBY/5/
You need something like that?
ul li
{
float: left;
}
You can use the vertical-align property and set img to vertical-align: top:
img {vertical-align: top;}
Please view the DEMO.
Try this:
ul li {
list-style: none;
float: left !important;
}
I have looked at all the similar questions which suggest:
Adding overflow: auto to the <ul />.
Float the <li /> left.
Both cause the list to either display below the image or in a column to the left of the image. I want the list to wrap around the image. Is this possible?
In the example I have used a border instead of background
http://jsfiddle.net/jvh6N/
What is wrong with floating the <li>? You just need to have it be the first <li> for the other ones to wrap around it:
li:first-child { float: left; }
http://jsbin.com/ekonuf/