Im trying to make a picture display inline with text on it's right, AND at the same time positioned in the middle of the vertical axis to fit in the navigation bar.
At the moment, I can only get it to display inline but it always verges to the bottom of the bar rather than the top.
HTML:
<div id='profileBar'>
<img src='karl.png' width=25 id='profileBarPic'/>
Damen
</div>
CSS:
#profileBar {
float: right;
padding-right: 10px;
}
#profileBarPic {
width: 25px;
display: inline;
float: left;
padding-right: 10px;
}
What it looks like:
Text next to an image? That's how images have always worked. You can get the desired affect with a lot less markup:
<div id='profileBar'>
<img src='http://placekitten.com/50/50' id='profileBarPic'/>
Damen
</div>
And CSS:
#profileBarPic {
vertical-align: middle;
}
Fiddle
A little explanation. img is basically an inline element to begin with, so adding float and display: inline is not necessary.
By default img aligns with the baseline of its container (the bottom edge of an image will align with the bottom of a text line it is next to). vertical-align changes where the img should align itself to (in this case, you wanted the middle).
Try uploading a fiddle next time, I think this should fix it though:
#profilebar {
float: right;
padding-right: 10px;
display: table-cell;
vertical-align: middle;
}
put your text into a span or something so that you can put a display:inline-block on both it and the <img>. This way, you won't need the float:left. Then apply a vertical-align:middle
so:
HTML:
<div id='profileBar'>
<img src='karl.png' width='25' id='profileBarPic'/>
<span>Damen</span>
</div>
CSS:
#profileBar {
float: right;
padding-right: 10px;
}
#profileBar span {display:inline-block; vertical-align:middle; }
#profileBarPic {
width: 25px;
display: inline-block;
vertical-align:middle;
padding-right: 10px;
}
Related
I have a parent div that contains text and a logo. These two elements are supposed to appear next to each-other, on the same line.
Despite having floated both elements to the left, adding code to have both image and parent container display inline, and having made sure the parent element is wide and tall enough to contain the image, the image is collapsing under the text.
HTML:
<div class="heading"><h1>Stanford Connection</h1><img src="tree-logo.gif" alt="Stanford Logo" id="logo"/></div>
CSS:
.heading {
width: 800px;
background-color: #9A0000;
color: white;
font-size: 20pt;
float: left;
overflow: hidden;
display: inline-block;
}
#logo {
float:left;
display: inline-block;
}
The problem is that you haven't truly floated both elements to the left. You've floated .heading and #logo to the left, but floated elements should be siblings. As such, .heading would float to the left of any sibling element, and h1 isn't set to float at all.
To align your images, all you need to do is float h1 to the left as well:
.heading {
width: 800px;
background-color: #9A0000;
color: white;
font-size: 20pt;
float: left;
overflow: hidden;
display: inline-block;
}
h1, #logo {
float: left;
}
<div class="heading">
<h1>Stanford Connection</h1><img src="http://placehold.it/100" alt="Stanford Logo" id="logo" /></div>
Note that depending on where exactly you want the image to sit, display: inline-block may suit better.
Hope this helps! :)
vertical-align has always given me problems in the past and once again I'm met with a problem that I don't know how to solve.
I have this html:
<ul id="council-slider">
<li class="col-md-12" style="display: block">
<img src="somesource" />
<div class="council-spacer"></div>
<p>text content goes here</p>
</li>
</ul>
CSS:
#council-slider {
margin: 0 auto;
list-style: none;
min-height: 300px;
max-height: 400px;
}
#council-slider li img {
float: left;
height: auto;
width: 25%;
margin: 5px;
}
.council-spacer {
height: 300px;
width: 100px;
float: left;
}
#council-slider li p {
margin-top: 100px;
}
I want to be able to vertically align the image in the middle. The text is multiple lines that wrapped so using line-height will not work in this situation. Also the images can have varying heights.
There are multiple list items; I just used one in the example to simplify and reduce the html.
You should read up on where the vertical-align property has the ability to be applied.
Quoting from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.
Since your element is not being displayed as either inline or table-cell vertical-align: middle; will not do you any good here.
You can, however, set your <div> styling to display: table-cell; and then vertical-align: middle
Alternatively, this can be achieved with CSS3 as hars pointed out, just make sure your user's browsers support CSS3
.valign-middle {
position: relative;
top: 50%;
Transform: translateY (-50%);
}
The way this works -
Set position relative to the parent/container (i.e. <li> in your case)
Move the image that you want to vertically align, down 50% of the container height
Move the image up 50% of the height of the image
Add a class to your img as below.
.verticallyCenter {
position: relative;
top:50%;
Transform:translateY (-50%);}
Refer This
Without seeing your actual css code it is hard to say, but you should use vertical-align: middle for all objects that you want to align and you may need to change the display of your paragraph to display: table-cell.
Will be easier using flexbox: display: flex; and align-items: center;
Demo
#council-slider {
list-style: none;
}
#council-slider li{
display: flex;
margin: 10px 0;
align-items: center;
}
.council-spacer {
width: 20px;
}
Lets take two images as an example
With float: left;
Without float: left;
HTML
<h6><span>Sign Up</span></h6>
CSS
h6:before {
content: url("images/arrow.png");
padding-right: 8px;
float: left; // Here lies problem
}
Question
Why without float: left; text (Signup) goes down ? What's science behind this ?
The default display mode of a pseudo element is display: inline; and the default vertical alignment is vertical-align: baseline;. This means that the image will be aligned to the baseline of the text.
When you float an element its display mode becomes display: block; and it is removed from the document flow. Vertical alignment is no longer a factor and in this case the top edge of the span is now aligned with the top edge of the floated pseudo element.
As Luis P. A. and Paulie_D allude to in the comments, changing the vertical alignment will allow for the non-floated pseudo element to be aligned to the middle of the text:
h6:before {
content: url("http://placehold.it/20x20");
display: inline-block;
padding-right: 8px;
vertical-align: middle;
}
h6 span {
vertical-align: middle;
}
<h6><span>Sign Up</span></h6>
<img style="float: left;" width=200 height=200 src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQOrSSvhefLVAXo3OOoMGYGS232bfHFnZyA9Jk24KeefYuau8c">
<div id="t">text next to it which will be line broken!</div>
#t
{
float: left;
line-height: 200px;
background-color: red;
}
http://jsfiddle.net/s4wMF/
well... as you can see, shrinking the width will cause the text goes underline. I want to achieve something like this:
If you wish to align the text vertically in the centre of the div it would be a good idea to use the table-cell method here instead of line-height.
<div id="t"><p>text next to it which will be line broken!<p></div>
Try something like this
#t
{
float: left;
background-color: red;
width:100px;
height:200px;
display: table;
}
#t p {
display:table-cell;
vertical-align: middle
}
Get rid of line-height. This will cause it wrap around as you described.
Try
img { display: block; }
#t { vertical-align: middle; }
There are other options for vertical-align so work with the one that works best for you.
I have a span with a background image, but it aligns differently without text in it, how can i have them aligned independent of the content?
For this it has to be inline-block and it has to be a css only solution.
Here is an example.
HTML:
Test
<span class="test">Blafffff</span>
<span class="test"></span>
CSS:
.test
{
display: inline-block;
line-height: 30px;
border: none;
height: 30px;
width: 120px;
text-align: center;
margin-top: -15px;
background: url("http://i.imgur.com/vYiCjoF.png") no-repeat;
}
EDIT: Thanks for the answers so far, but it has to align with the other text around it, i updated the example
You are using display: inline-block; so the span will align to the baseline, hence use vertical-align: top; to align them consistently.
Demo
.test {
/* Other properties */
vertical-align: top;
}
Alternatively, you can also use float: left; here, than you won't need vertical-align property, but than you need to make sure that you clear the floating elements.
For more information on float and clear, you can refer my answer here and here.
http://jsfiddle.net/9YUdb/2/
.test
{
display: inline-block;
float: left;
}
To align with the text around it, you'll need to give the span some content. You can do that with a :before pseudo-element. Putting it a zero-width non-breaking space will do the trick. i.e.
.test:before {
content: '\FEFF';
}
See http://jsfiddle.net/9YUdb/6/