why is it happen?
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2FCIU0MAB5Op7RAt-5u576obOi-9JKtseSgYJDMdhAc04mKoS"
style="width:200px; height: 200px;"></img>
<span style="margin-top: 300px;">my text</span>
this is my jsfiddle:
http://jsfiddle.net/8sxFT/1/
I know I can add display: block to the span and then margin-top will work.
but why isn't it working now? I closed the img element..
any help appreciated!
Span element is inline element not a block element. So they ignore vertical margin value.
Solution is you can make the span element display:inline-block; Now you can use margin property.
Check this Demo jsFiddle
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2FCIU0MAB5Op7RAt-5u576obOi-9JKtseSgYJDMdhAc04mKoS" style="width:200px; height: 200px;"></img>
<br />
<span style="margin-top: 300px;display:inline-block;">my text</span>
you are forgetting to use the float:leeft or right try it
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2FCIU0MAB5Op7RAt-5u576obOi-9JKtseSgYJDMdhAc04mKoS' style="float:left;width:200px; height: 200px;">
<span style="float:left;margin-top: 300px;">my text</span>
you don't need to close the img tag as you did < /img>
Related
Hi having some issues here trying to stack image and text on the same line left to right.
<div style="position: absolute; top: 200px; left: 30px;">
<span style="float: left;">
<img class="tglbtn" src="img/toggle_tab_l.png" data-swap='img/toggle_tab_r.png' height="60%" width="60%">
</span>
<p style="float: right; font-size: 20px; color: #92d6f8; overflow: hidden; text-align: left">
Remember User ID?
</p>
</div>
Your Code
http://jsfiddle.net/21Ltsbeb/
Improved
http://jsfiddle.net/21Ltsbeb/1/
I'm not seeing the issue? Though, you might be better off using display:inline-block with matching html elements. Inline as in Have these elements in the same line
.tglbtn {width:60%;height:60%;}
span {display:inline-block;}
p {font-size:20px;color:#92d6f8;overflow:hidden;text-align:left;}
<div>
<span>
<img class="tglbtn" src="http://www.placehold.it/66x66">
</span>
<span>
Remember User ID?
</span>
</div>
Edit
A few things I should note that you need to address as a beginner.
Don't use inline css
Don't use pixels (rem,em,or %)
Avoiding using position absolute
Don't use floats
Remember that good web applications have great continuity in their structure.
Until you get the hang of CSS, I might recommend Foundation's CSS or Bootstrap CSS.
This could be cleaned up a lot for you, and also simplifying your css/removing a lot of the inline styling:
.mind{
display:inline-block;
vertical-align:top;
}
.tglbtn{
height:20px;
}
<div class="wrap">
<img class="tglbtn" src="http://placekitten.com/g/200/300" data-swap='img/toggle_tab_r.png' />
<div class="mind">Remember User ID?</div>
</div>
Set the paragraphs top margin to 0
margin-top:0;
It's being set by the browser default otherwise (I see the mis-alignment in chrome).
See this fixed Example
I have an image inside a span tag. But the problem is the image doesn't fit inside the span tag. Instead a part of the image goes out of the span tag.
<span style="padding-right:3px; padding-top: 3px;">
<img class="manImg" src="images/ico_mandatory.gif"></img>
</span>
I want to have that bar inside the span i.e It should be adjacent to the text box.
How can I achieve it?
Try this.
<span style="padding-right:3px; padding-top: 3px; display:inline-block;">
<img class="manImg" src="images/ico_mandatory.gif"></img>
</span>
Try using a div tag and block for span!
<div>
<span style="padding-right:3px; padding-top: 3px; display:block;">
<img class="manImg" src="images/ico_mandatory.gif"></img>
</span>
</div>
I've seen some other posts on this but even using their method on my code doesn't seem to be working for me. What am I doing wrong when trying to center these divs?
This example works fine for me (taken from another SO post).
But this one (which is my code) doesn't behave the same and isn't centered properly.
here is my code that is also in my JSFiddle
.pdf-pageimage-container {
display: block;
margin: 0px auto;
border: 1px solid #EEE;
}
<div class="pdf-pageimage-container" style="position:relative;width:612px;height:792px;">
<img style="width:612px;height:792px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:792px;height:612px;">
<img style="width:792px;height:612px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:612px;height:792px;">
<img style="width:612px;height:792px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:792px;height:612px;">
<img style="width:792px;height:612px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:612px;height:792px;">
<img style="width:612px;height:792px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:812px;height:792px;">
<img style="width:812px;height:792px;" />
<div>
you are not ending div tags.
<img>
can work without "/"
and to align horizontally in center use
<div align="center" class="pdf-pageimage-container" style="position:relative;width:792px;height:612px;"></div>
Your HTML is incorrect. You are opening <div> tags but not closing them with </div>, so you are opening lots of nesting div elements.
You can place them in a wrapper div with a fixed width and then center each of them with auto margin.
Let's say that the wrapper has an ID wrapper and the sub-elements all have the class child. In that case you can for example set the following in your CSS
#wrapper{
width: 800px;
}
.child{
margin: 0 auto;
}
First off I would close the endings of the "div" tags like so just to stay valid with your code.
I'll assume that these divs will stack on top of each other so add this to your "pdf-pageimage-container" css class:
.pdf-pageimage-container {
clear : both;
}
If you want the divs to float next to each other one after another you could use this instead
.pdf-pageimage-container {
float : left;
}
Hope this helps.
I have some HTML:
<div align="center" style="border:1px solid red">
This is some text in a div element!
</div>
The Div is changing the spacing on my document, so I want to use a span for this instead.
But span is not centralizing the contents:
<span style="border:1px solid red;align=center">
This is some text in a div element!
</span>
How do I fix this?
EDIT:
My complete code:
<html>
<body>
<p>This is a paragraph. This text has no alignment specified.</p>
<span style="border:1px solid red;text-align=center">
This is some text in a div element!
</span>
</body>
</html>
A div is a block element, and will span the width of the container unless a width is set. A span is an inline element, and will have the width of the text inside it. Currently, you are trying to set align as a CSS property. Align is an attribute.
<span align="center" style="border:1px solid red;">
This is some text in a div element!
</span>
However, the align attribute is deprecated. You should use the CSS text-align property on the container.
<div style="text-align: center;">
<span style="border:1px solid red;">
This is some text in a div element!
</span>
</div>
Please use the following style. margin:auto normally used to center align the content. display:table is needed for span element
<span style="margin:auto; display:table; border:1px solid red;">
This is some text in a div element!
</span>
The align attribute is deprecated. Use CSS text-align instead. Also, the span will not center the text unless you use display:block or display:inline-block and set a value for the width, but then it will behave the same as a div (block element).
Can you post an example of your layout? Use www.jsfiddle.net
span.login-text {
font-size: 22px;
display:table;
margin-left: auto;
margin-right: auto;
}
<span class="login-text">Welcome To .....CMP</span>
For me it worked very well. try this also
On top of all the other explanations, I believe you're using equal "=" sign, instead of colon ":":
<span style="border:1px solid red;text-align=center">
It should be:
<span style="border:1px solid red;text-align:center">
Span is inline-block and adjusts to inline text size, with a tenacity that blocks most efforts to style out of inline context. To simplify layout style (limit conflicts), add div to 'p' tag with line break.
<p> some default stuff
<br>
<div style="text-align: center;"> your entered stuff </div>
Just use word-wrap:break-word; in the css. It works.
I have the following code:
what i want is using css put the "MYIMAGE" on the most right side.
alt text http://igurr.com/resized-image.ashx/__size/500x400/__key/CommunityServer.Components.PostAttachments/00.00.00.01.73/OneContact.JPG
<div style="cursor: pointer;" onclick="javascript:SelectContact('17');" onmouseover="javascript:this.className='onfocus';" onmouseout="javascript:this.className='tempClass';" id="contact_17" class="tempClass">
<input type="checkbox" class="contactChk contactItem" id="chk_17" name="chkContact" onclick="javascript:alert('clicked');"/>
<img height="25" width="25" class="contactItem" src="Images/Contacts/NoImage.gif" alt=""/>
<span class="contactName" id="contactName_17">
Amr ElGarhy
</span>
<img id="MYIMAGE" src="Images/Common/Motiva.png" alt="" class="contactItem"/>
<br/>
</div>
CSS:
.contactChk {
margin-left:10px;
}
.contactItem {
display:inline;
vertical-align:middle;
}
.contactName {
display:inline;
vertical-align:middle;
}
An alternative is to use absolute positioning.
If #contact_17 is position:relative, you can set #MYIMAGE to position:absolute and set its 'right' property to 0 (or however far from the right edge you desire). Absolute positioning will ignore anything else in the div, though, so if you do that be sure to set the rest of the contents to not overlap.
Try:
img#MYIMAGE {
float: right;
}
Not sure if that'll work - it depends on how div#contact_17 is styled, which isn't clear from your question.
Just float it right
#MYIMAGE{
float:right;
}
It would be a good idea to fix the width of the image too.
Try float:right;