I have this:
http://jsfiddle.net/8KWtH/
I would like to move the > so it is in the middle vertically of the two images.
How can i do this?
Use line-height to accomplish this:
<span style="font-size: 34px;line-height: 79px;"> > </span>
EDIT:
Because of the nature of the images, you need to use vertical-align to accomplish this:
<div style="float: left;">
<img src="http://www.lokeshdhakar.com/projects/lightbox2/images/image-2.jpg" style="width: 60px; height: 79px;vertical-align: middle;">
<span style="font-size: 34px;"> > </span>
<img src="http://www.lokeshdhakar.com/projects/lightbox2/images/image-2.jpg" style="width: 60px; height: 79px;vertical-align: middle;">
</div>
You can set your images to have vertical-align:middle; but that will make the > start from the middle. so it will still go up a little.
example: http://jsfiddle.net/8KWtH/14/
Applying the vertical align to the span as well makes it perfect.
example: http://jsfiddle.net/8KWtH/22/
I'd start by using the following instead of >.
>
I whipped out something here
From what I can see it is basically a variation on the other answers but it gets the job done
Related
Today's WordPress trauma...
Goal: using a three column layout, have an icon next to link text, followed by some descriptive text.
50pxICON (here's my link that should be centered vertically next to
the icon)
Here's some text describing the destination
What I can't seem to do is get my link text vertically centered on the icon. I've tried wrapping it in a div, tried specifying the height of the div, etc... I'm sure it's something basic that I'm overlooking
Current code:
[col3]<div style="height:50px;"><img src="myimage"> text</div>
Here's our description[/col3]
There is a lot of ways & approach, Try this approach and Hopefully, this will help.
<div class="wrapper">
<img class="image" src="myimage" style="
height: 50px;
display: inline-block;
vertical-align: middle;" />
<a href="mylink" class="link-text"
style="display: inline-block;
vertical-align: middle;">
Your text
</a>
</div>
I have the following alignment:
<div class="main">
<div class="header"></div>
<div class="right-bar">
<div class="chat-user-content">
<span class="chat-user-photo">
<img src="http://d13yacurqjgara.cloudfront.net/users/25963/avatars/mini/2013-avatar_(1).png" />
</span>
<span class="chat-user-name">Fulano Silva</span>
<span class="chat-user-status"><img src="http://www.colorhexa.com/a7ba3d.png" /></span>
</div>
</div>
</div>
.chat-user-status > img{
border-radius: 50%;
height:15px;
width:15px;
}
But I can not align the <SPAN> "user-chat-status" right without using an image. I would like the image that appears in green, were a <DIV> or <SPAN>. What am I doing wrong?
JSFiddle
Check this fiddle out: http://jsfiddle.net/3PduX/18/
I put display:block to the span, which i think may have been what you missed.
Radu Chelariu's idea was even better though. I smashed a working example together without having to use the extra span, check it out here: http://jsfiddle.net/3PduX/22/
It uses the :after pseudo element.
If you are using two divisions one after other, you can use clear:both; in current div.
If you want to align the div to right,you can use .
I hope it will work.
Pish, posh. Images for UI are silly. That's why we have pseudo-elements!
Basically, you just have to replace your image with a :after or :before and style that accordingly. Here's a JSFiddle to illustrate:
http://jsfiddle.net/sickdesigner/N99j3/
Cheers!
I have been struggling to find a simple solution to the following problem using the CSS inline styles due to being on a free wordpress.com blog.
a table
inside each table cell there is an three parts
a hyperlink to enclose the two objects below
image - align vertical and horizontally centred in the table cell
text at the bottom of the table cell
<psedo markup>
<td>
<a href="#">
<img style="vertical-align:middle" src="" />
<p style="vertical-align:bottom">Text at the bottom</p>
</a>
but just cant seem to get a consistent result, am I better using <div style="display:block"> instead?
If you can use html5, use a figure:
<td>
<a href="http://gravatar.com">
<figure style="text-align: center;">
<img src="https://www.gravatar.com/avatar/5a25eba05dc8ac4384384c7a220958a6?s=32&d=identicon&r=PG&f=1"
alt="" width="32" height="32">
<figcaption>gravatar glyph</figcaption>
</figure>
</a>
</td>
The figure element was added precisely for situations like this, though the needed style here is a bit quirky.
HTML:
<table>
<tr>
<td style="text-align: center;">
<a>link</a>
<img style="display: block; margin: 0 auto;" src="http://placebacn.com/400/300">
<p>Bacon... Bacon... Bacon...</p>
</td>
</tr>
</table>
Even if you can't add a CSS file you may be able to add a <style> block before the HTML which would be better than inline styles:
<style>
td {
text-align: center;
}
td img {
display: block;
margin: 0 auto;
}
</style>
Fiddle: http://jsfiddle.net/xeTPx/2/
Please don't use tables for layout (i.e. non-tabular data - not sure if this is or not), there are other ways to have a similar layout without the bloated markup and accessibility problems. display: flex is often a good option as it now has support in a lot of today's browsers. Sometimes even using other markup with CSS display: table and display: table-cell is another option.
This might be a good read on vertical-align: http://css-tricks.com/what-is-vertical-align/
I would suggest to separate img and text from the same alignment-structure. I think you can manage to center the img but the text ruins this alignment. The trick that I use is position>relative to the parent and position>absolute to the child. Here you go:
<td>
<a href="#" style='**position:relative;**'>
<img style="vertical-align:middle" src="" />
<p style="**position:absolute; bottom:0;**">Text at the bottom</p>
</a>
</td>
By doing this p is not in the same alignment structure anymore.
I hope this solves your problem.
I have an HTML "toolbar" containing a number of widgets arranged horizontally. Each item is represented by a div in the source document:
<div id="widget1" />
<div id="widget2" />
<div id="widget3" />
I position the divs using float: left. The problem is that I also want them to be pinned to the top of the toolbar so that they don't wrap around if the user reduces the width of the window. Instead, I just want them to overflow horizontally (with the overflow hidden) so that the behavior is like that of a real toolbar.
In other words, I want something like position: fixed but only for the vertical coordinate. Horizontally they should be positioned one after another in a row. Is there any way to do this with CSS?
Update Here's the real HTML I'm using. The divss with class="row" are the ones that should appear as widgets in the toolbar, arranged horizontally in a single row.
<div class="row" id="titleRow">
<span class="item"> <img src="../images/logo.png" height="26" /> </span>
<span class="item" id="title">Title</span>
<span class="item" id="close" onclick="window.close();"> close </span>
</div>
<div class="row" id="menuRow">
<span class="item"> <ul id="menu"></ul> </span>
</div>
<div class="row" id="searchRow">
</div>
<div class="row" id="pageRow">
<span class="item" id="page-related-data"> Page-related data: </span>
</div>
Rather than float: left; try display: inline-block; vertical-align: top;. Then set white-space: nowrap; and overflow: hidden; on the parent element. See http://jsfiddle.net/rt9sS/1/ for an example.
Note inline-block has some issues. It's white space aware (so white space around elements in the HTML will be visible in the document). It also has limited support in IE6/7, although you can work around that by giving the element layout, e.g. .oldie .widget { display:inline; zoom:1; }. See http://www.quirksmode.org/css/display.html#inlineblock for more.
I know this is an old question, wanted to add a simple jquery answer for those that run across it.
$(window).scroll(function(){
$("#keep-in-place").css("top",$(document).scrollTop()+"px");
});
To make higher or lower on page simply add to $(document).scrollTop()
Works for me
i have this page:
login: maria#mail.com
password: m
I want to have the string "Editar mi perfil" aligned on the right, so i have added:
text-align: right
but it doesn't work,
I have tried also:
float:right
It works but goes a bit upper than I want.
Any idea?
Regards
Javi
The problem is the display:inline. Remove it (and perhaps the top margin, if you don't want it), and it should work.
use <div> instead of <p>
<div style="float: left;">
<h2 id="nombre_apellidos">Maria Galindo Alvarado</h2>
</div>
<div style="float:right;padding-top:0px;" id="editar_o_mensaje">
<a id="enlace_editar_perfil" href="/rs2/web/miembros/edit/id/2">Editar mi perfil</a>
</div>
Change proper padding-top:0px; to align
Adding float: right; padding-top: 5px; in enlace_editar_perfil seems to fix it in Firefox. The padding-top will push it down to the position you want it.