Vertical align on image and text? - html

I have an anchor tag setup like below
<a href='' title='' class='video-author-box hoverbox'>
<img style='height:32px;' src='IMAGE_URL' alt='' />
Username
</a>
The trouble is that the text aligns to top of image, but I want the text to align in middle of the anchor and image.
Example: http://jsfiddle.net/qZFFX/2/

Here are two simple solutions for that:
Remove float: left of the image, so it will become inline, and add vertical-align: middle
Fiddle 1
If you know the height of your image (32px in your case), set the line-height of it's container to it.
Fiddle 2

You could do this
Add a span around the username and style like so
.video-author-box span{
display:inline-block;
padding-top:8px;
}
Example: http://jsfiddle.net/qZFFX/3/
Then you can adjust the padding as you see fit.
Alternately, you could do this, without the use of span
.video-author-box{
display:inline-block;
padding-top:8px;
}
.video-author-box img{
margin-top:-6px;
}
Example 2: http://jsfiddle.net/qZFFX/5/

Related

minimal css/html text paragraphs next to image within list

I'm trying to create a list (ul) with each li containing an img on the left and a text left aligned (title and one or more paragraphs) next to the image, on the right.
I played around with float: left and some display but can't get it working, the text float around (under) the image while I'd like to keep it left aligned but next to the image.
If possible I'd like to keep html and css to the minimal needed (and compatible with most browsers).
<ul>
<li>
<img />
<div>
<span></span>
<p></p>
</div>
</li>
</ul>
img, div {
display: inline-block;
vertical-align:top;}
Use float:right for text (or the element which contains all the paragraphs of text) and then clear:both underneath or play a little bit with flexbox (preferable).
Using the "before" pseudo selector could be a good way to go for the image.
Something like: https://jsbin.com/sumomebolu/edit?html,css,output
ul {
list-style-type: none;
}
li:before{
content:url('url.jsg');
position:relative;
left:-20px;
}

how to put an img under a header(div) that contains other divs?

I put a header which contains three divs. One has an image and the other two contain text.I then tried putting an image under it which has the same width of the header. But when I first put it, it was over the header div( I thought it should go under it). I then tried pushing it down by increasing the top margin and it worked. But as I increase the width of it the text in the header moves although it is not touching it!
This is the html code:
<div id="header">
<img id="logo" src="...."> <!---the logo at the top right-->
<div id="name">JANE DOETTE<div> <!---the text that moves - top left -->
<div id="job">Front-End Ninja</div> <!--under the text that moves but doesn't move--->
</div>
<img id="image" src="...."> <!---the image-->
This is the css code:
#header {
height: 6em;
width:80%;
background-color: white;
margin-left:10%;
margin-right:10%;
border-bottom:2px solid #BCBBBB;
margin-bottom:10px;
}
#image{
margin-left:10%;
margin-right:10%;
height:10em;
width:80%;
}
#logo {
height:88px;
width:89px;
}
#name {
color: #BCBBBB;
text-align:left;
float:right;
font-size:2.7em;
font-family:sans-serif;
height:50%;
}
#job {
color: #BCBBBB;
text-align:left;
float:right;
font-size:0.5em;
font-family:sans-serif;
font-weight:bold;
margin-top:0.2em;
}
Those are my questions:
Why doesn't the image automatically go under the header div?
Why does the text move?
Why is the top text the one that moved although the one at the bottom is nearer to the image?
What should I do to get the image under the heading div?
I adjusted the width of the image to 80%. But it seems to be just 20%. Why?
Has it got anything to do with position or display?
***Sorry for not adding an image of it but I don't have a reputation of more than 10 ( I am not allowed to).
***Sorry for the long questions.( I am still a beginner).
***Your answers would be much appreciated.
Your question isn't all that clear (please clarify), I will try to answer regardless, but I might misrepresent your question.
1 / 6 . The biggest problem you have I think is that you don't tell the browser how to 'order' the divs. Should they be under eachother or next to eachother? Use the "display" property for this. Use "display: block" to make sure that page-elements like divs or images are stacked under eachother. Depending on the margin the browser uses the remaining space to stack elements next or above eachother.
2 / 3. Because it floats. A float is relative to other elements on the page. If you make it float right, but the content within it align to the left the box goes left while the content within it stays as far to the left as it can keeping with the contraints of the div container. Therefore it seems to move. Lose the float and use "display: block" to make the div be the full width of the header div.
#name {
color: #BCBBBB;
text-align:left;
font-size:2.7em;
font-family:sans-serif;
height:50%;
display: block;
padding-left: 10px;
}
4 / 5 . Lose the "height" property of the image. Because the image has a relative 'height' property next to a relative 'width' property it distorts the image scaling. Use only the width as a percentage and it will scale proportionally.
You are missing a slash. Instead of
<div id="name">JANE DOETTE<div>
it should be:
<div id="name">JANE DOETTE</div>
After adding the slash it appears fine to me in Chrome and Firefox (except for the missing images obviously). See fiddle. Does that solve all of your questions?

another vertical align issue inside a div

i can never seem to get the vertical align attribute to work. i have a simple div with a small picture inside it (40px high) and i need the text to align vertically in the middle. can somebody shed some light on what im doing wrong here? thanks
HTML:
<div id="back"><img src="../../images/back-button-1.jpg" style="padding-right:10px;" width="40" height="40" alt="back" />Back</div>
CSS:
#back{
width:auto;
height:40px;
background:#C36;
font-family:arial,verdana,helvetica,sans-serif;
font-size:15px;
color:#333333;}
Add this rule:
#back img {
vertical-align:middle;
}
jsFiddle example
Using "line-height" set to the height of the container on an inline element works well in this case as well, but only if it is one line of text.

Why won't div float next to image? (goes behind image instead)

I'm trying to have an image, and then to the right of the image I want a div box to be there. I've been trying to search for the reason for this, but I cannot find it. I'm assuming div's can't be floated next to images for some reason because I've successfully done it with text.
http://jsfiddle.net/n8ZDQ/1/
(you can see the red div box is actually mostly behind the image, only part of it is popping out the right side)
HTML:
<img src="http://stignatiusyardley.org/pictures/NFP/NFP%20family%20image.jpg" style="float:left;width:370px;height:246px;" />
​
CSS:
#optin {
width:466px;
border:1px solid #CCCCCC;
height:166px;
background-color:red;
}​
The div itself is not floating! Try adding float: left to #optin.
The DIV is a block level element by default. Only inline or inline-block elements will display the way you want. To get the effect you need, you need to either make the DIV display: inline-block or float: left.
Adjust the css of #optin to float as well
#optin {
width:466px;
border:1px solid #CCCCCC;
height:166px;
background-color:red;
float: left;
}​

Text Overflowing Div

I am trying to build a simple div with a span of text inside of it.
<div id="bottom-text">
<span>ONE STOP</span>
</div>
And here is the simple CSS styling I have in effect for "#bottom-text":
#bottom-text{
font-weight:700;
font-size:50px;
text-align:center;
margin:auto;
position:relative;
padding-top:25px;
height:65px;
width:auto;
}
For some reason, the text "ONE STOP" displays partially outside of #bottom-text. (only the top portion of all the letters...) I've tried using padding to fix it but the text then overflows partially into the padding region!
Can anyone help me figure out why this text is displaying outside the div it is supposed to be contained within? (I've been testing Chrome and Firefox)
Thanks all.
.largefont {
color: #0066FF;
font-family:arial;
font-size: 6px;
display: inline;
}
<span class="largefont">block level span</span>
Assign a class to the span and play with that.
look at your code, the #bottom-text is 65px height, the font-size is 50px, and padding-top is 25px
65-(50+25) = -10
So you will see only the top 10 pixel of your text.
Set padding-top to a lesser amount, and play with just so it is correct
Check your line-height. Only thing I can think of is you might have some styles elsewhere that are adding some in. Try adding "line-height: 1;" to your existing #bottom-text CSS so that your text is actually 50px high. Or, if you want the text to vertically center in #bottom-text make your line-height match the height of #bottom-text (65px).