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>
Related
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>
I want to use span inside div
div is used to put a red horizontal line
<div style="background-color:red;">
</div>
span is used inside div to put elements to right
<div style="background-color:red;">
<span style="float:right;">
ABC
</span>
</div>
But the horizontal line do not get red color, only ABC is shown in right, infact there is no effect of div style like width:900px......why?
I'd suggest:
<div style="background-color:red; text-align:right;">ABC</div>
Otherwise, you need to add overflow:auto to your div's style definition if you do want to leverage the <span> as in your original example.
Cheers
Add overflow:auto to the div:
<div style="background-color:red;overflow:auto;">
<span style="float:right;">
ABC
</span>
</div>
jsFiddle example
Floating the inner span causes the div to essentially collapse, and adding the overflow rule allows it to regain the span.
The float is not giving your div any height. You need to follow it up with a clear. Try this:
<div style="background-color:red;">
<span style="float:right;">
ABC
</span>
<div style="clear: both;"></div>
</div>
You need to add the property overflow:hidden; in your DIV.
Below I mentioned the Code:
<div style="background-color:red; text-align:right; overflow:hidden;"> ABC </div>
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
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>
I am making a WYSIWYG webpage editor: http://brokenmyriad.com/editor2.php, however I have come across a problem when trying to add image functionality.
Note: the image is not inside a contenteditable element, but is just a normal floated image.
The problem can be recreated by clicking into either the paragraph or the heading and the clicking the insert image button on the toolar (the far right button). (on the above linked page).
In standards based browsers it works as expected, and the heading and the paragraph are both to the right of the image, however in ie6 the paragraph is under the floated image like in this picture: http://tinypic.com/view.php?pic=2mfcfo8&s=3
My simplified code structure is as follows:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
</div>
<div>
<p>Click here to edit!</p>
</div>
What I want is for the <p> element to be alongside the floated image, and under the <h1> element as it is in standards based browsers.
Any help would be greatly appreciated!
Why is the paragraph in a separate div? Wouldn't the following work:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
<p>Click here to edit!</p>
</div>
If you must have the divs, then the second one needs to be nested
<div style="float: left;">
<img style='float:left'>
<h1>Click here to edit!</h1>
<div style="float: left;">
<p>Click here to edit!</p>
</div>
</div>
Your second div should be floated left:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
</div>
<div style="float:left;">
<p>Click here to edit!</p>
</div>
It turned out that the elements had width:100% on them, which was causing the error.