I am trying to bottom align an image to a h1 text, but I am not achieving the desired results.
I tried adding two divs and align them that did not work well, now I am trying to align a span but I am not getting the desired result as well.
<div id="formheader">
<div id="formlogo"> <img src="../../Pictures/EditIcon.gif" width="17" height="20" alt="login logo"> </div>
<div id="formtitle"> <span> <img src="../../Pictures/EditIcon.gif" width="17" height="20" alt="login logo">Editor</span> </div>
</div>
Any tips on how to align images with text? I had to change from h1 to span because it would not align as h1.
Write like this:
img{
vertical-align:bottom;
}
Related
I have 3 divs, an image div, a text div and another image div
http://jsfiddle.net/m02pw4wk/4/
<div id="1" style="display:inline-block; width:100px">
<span style="margin:0;">Center<span>
</div>
I want to center the span text in its parent div
I tried vertical-align on the text but no success, also I see that there is a small margin, ou padding below the text, where is it coming from ?
Any pointing on the solution would be helpful
Cheers
You need to change the vertical-align property for the img element - not the text. It's worth noting that the default value for this property is baseline, thus the image element is aligned to the baseline of the text. Values such as top/bottom/middle will change this behavior.
Updated Example
img { vertical-align: middle; }
It's also worth noting that ids are suppose to be unique.
<div id="userbox" style="float:right; background-color:grey;display:table;">
<div id="1" style="display:inline-block">
<img src="http://www.dev2one.com/excel2web/demo/images/user_pic2.png" />
</div>
<div id="1" style="display:inline-block; width:100px;display:table-cell;vertical-align:middle;">
<span style="margin:0;">Center<span>
</div>
<div id="1" style="display:inline-block">
<img src="http://www.dev2one.com/excel2web/demo/images/cross.png" />
</div>
</div>
I need to rotate some text under an image and place it to the left of the image and vertically centre it. Im using this with a CMS so the exact height and width of the image will vary. I also need to centre the image on the page.
This is what I have:
And this is what im trying to achieve:
Here is my fiddle, but I havnt got very far with it: http://jsfiddle.net/FgA8x/5/
This is the rough structure of the html, but this could be changed if needs be:
<div>
<img src="http://thumbs.dreamstime.com/z/young-footballer-1642893.jpg" width="150px" height="250px" />
<p>This is some caption text</p>
</div>
<div>
<img src="http://thumbs.dreamstime.com/z/young-footballer-1642893.jpg" width="300px" height="250px" />
<p>This is some caption text</p>
</div>
<div>
<img src="http://thumbs.dreamstime.com/z/young-footballer-1642893.jpg" width="500px" height="250px" />
<p>This is some caption text</p>
</div>
I can't seem to get the spacing right, but this as a general idea of how to get the caption to line up on the left using display: inline on the container and float: left on the caption text. Heres a fiddle:
Fiddle
Hope this helps.
Hello I'm trying to create a navigation bar which is made up of several div containers in one big navigation div.
I'm not sure if my approach is right but I tried to do it like this:
<div id="navigation">
<div class="innen">
<div class="logo">
<img class= "logo" src="logo.png" title="Logo"/>
</div>
<div id="bar">
<!-- Navigation Items are in here --!>
</div>
<div id="gamecard">
<!-- Another right floated Element !-->
</div>
</div>
<div class="unten">
<p>You are here: Main</p>
</div>
</div>
I wanted to push down the bar div to meet the height of the image by using top padding:
#bar{
padding-top: 80px;
}
But now it moves the down gamecard container too. How can I prevent this from happening?
I also added a jfiddle:
http://jsfiddle.net/Cv4p2/
try using position:absolute
<div id="bar" style="position:absolute; padding: 80px 0 0 0">
</div>
Padding is intended to add a cushion inside the container in which you implement it. It appears that you would benefit from using margin. You should replace "padding-top: 80px;" with "margin-top: 80px;" and you would achieve the desired effect.
I have a container div which has text within it that I want centered. I want to also insert a div into the container which floats to the right, like this:
<div id="container" style="text-align:center">
Text
<div id="child" style="float:right"></div>
</div>
Unfortunately what happens is that the text is no longer centered with respect to the container, but is instead shifted to the left by the width of the child.
Does anyone know how to get the text to center whilst keeping the div contained to the right?
Something like this...
<div style='position:relative;'>
my centered text
<div style='position:absolute;right:0;top:0'>
my right div
</div>
</div>
You can obviously throw the inline styles into CSS.
Posibly this?? Creating 3 equal parts. left middle and right??
<div id="container">
<div id="child1" style="float:right width: 30px;"></div>
<div id="child2" style="float:right width: 30px; text-align:center;">TEXT</div>
<div id="child3" style="float:right width: 30px;"></div>
</div>
See here:
http://jsfiddle.net/MLaVb/1/
The caption that is positioned via position:absolute over the thumbnail (position:relative) moves when you hover over the thumbnail.. The only thing defined on :hover is the
transform:scale(1.2);
Any ideas how to fix?
I need two separate divs for the caption, 1 for the bg, 1 for the text (can't use RGBA).
Note that the margin around the image needs to remain. In this example, 5px, but could just as well be 20px or more.
Thanks,
Wesley
this is the working html +css
<a href="https://picasaweb.google.com/Darryl.Wilson1/MyPictures02#5157833312913845474" style="padding:0px;margin:0px" class="thumbnail zoom">
<div class="container" style="padding:0px;margin:0px">
<img src="http://lh6.ggpht.com/-iMWjZc44UuA/R5ROEhrn7OI/AAAAAAAAAV4/3l2mDuaeQ4Q/s160-c/Acura%252520Advanced%252520Sports%252520Car%252520Concept%25252002.jpg" style="width: 160px;">
<div class="title_grid inside" style="width: 160px;margin:0px;position:absolute;left:0px ">
</div>
<div class="title_grid inside_text" style="width: 160px;">
<span> Acura Advanced</span>
</div>
</div>
</a>