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.
Related
I will have 3 icons side by side that will float left when the window shrinks. Under each icon, I'd like to add some text. I can pretty much get it as you can see below.
.icons {
BORDER-TOP: black 1px solid;
HEIGHT: 100px;
BORDER-RIGHT: black 1px solid;
WIDTH: 100px;
BORDER-BOTTOM: black 1px solid;
FLOAT: left;
BORDER-LEFT: black 1px solid
}
<div class="icons">div 1</br><a>some text</a></div>
<div class="icons">div 2</div>
<div class="icons">div 3</div>
In jsfiddle, this </br> tag seems to come up as invalid. Is there a valid and / or better way to accomplish this?
http://jsfiddle.net/kp950/mum68pwv/
Just apply display: block to your text elements.
a { display: block; }
The will force each element to consume the full available width of the container, and subsequent elements to the next line.
http://jsfiddle.net/mum68pwv/4/
You're getting an error thrown in jsfiddle due to your linebreak syntax being wrong.
You're using </br> when you should be using <br/>
2020/HTML5 EDIT
You no longer need to use self-closing tags in HTML5 (though browsers can still handle them), instead you can simply use <br>.
Instead of </br> use <br> or <br />
<br /> is a valid tag whereas </br> is not so.
Use :
<div class="icons">div 1
<br>some text
</div>
<div class="icons">div 2<br>some
<br>some text
</div>
<div class="icons">div 3
<br>some text
</div>
P.S.
<a> is anchor tag and it is not a good option for adding little elements to your webpage. Instead use <span> tag which will be more efficient.
You have a syntax error in your <br> tag
So this
<div class="icons">div 1</br><a>some text</a></div>
should become
<div class="icons">div 1<br><a>some text</a></div>
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>
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>
Pretty rusty on my HTML and CSS skills, I've done this before at some point but forgotten how to do this.
I have text on the left side of the page, I want an image on the right side of this div next to it, floating there and not disturbing the text formatting.
Text Description.....
Description..........
Description.......... Image Goes About Here
Description..........
Description..........
Does anyone know how to do this off the top of their head? Thank you.
The easy solution is to use display: inline-block to display information next to an image, without having to add inline css.
img, p {
display: inline-block;
}
<img src="image.png" />
<p>
text left
</p>
use padding and float...
I.e.
<div id="container">
<div id="text" style="padding-right: <image-width+few px>">
text text text
text text text
</div>
<img src="<imagesrc" style= "float:right" />
</div>
padding so the text doesn't overlap with the image.
this should give you the desired effect.
After the image, add a div with clear:both to return to use all the dims of the div.
for example
<style type="text/css">
#picture {
float: right;
}
#text {
margin-right: 110px;
}
</style>
edited
I have the code below with 3 columns. I want to have the border of each column and each column also has its own color. I tried many previous examples of multiple column css problem and they don't work. For example, I don't want to use dirty trick of background image to render background color and border because the website allows changing color. Also I cannot use the method using thick border as color and then use negative margin with relative positioning. That method does not allow border. Below is the code. What is the best way? Thanks
<div id="results" style="display:block;float:left;width:210px;border:1px solid black;">
<span id="left" style="display:block;float:left;width:140px;border-right:1px solid black;">This is a long text and can be wrap to many lines</span>
<span id="middle" style="display:block;float:left;width:30px;border-right:1px solid black;">3:32</span>
<span id="right" style="display:block;float:left;width:30px;">Click</span>
</div>
Why just add all span height: 100%; and top div height: auto;?
BTW, I am pretty sure that span with display:block; is div .
BTW2: Table tag isn't banned - when u need table with "table data" (like e.g. schedule) you should use it. ;) Don't if you build layout of all website...
<div id="results" style="height:150px;float:left;width:210px;border:1px solid black;">
<span id="left" style="height:auto !important;height:100%;min-height:100%;float:left;width:140px;border-right:1px solid black;">
This is a long text and can be wrap to many lines
</span>
<span id="middle" style="height:auto !important;height:100%;min-height:100%;float:left;width:30px;border-right:1px solid black;">
3:32
</span>
<span id="right" style="height:auto !important;height:100%;min-height:100%;float:left;width:30px;">
Click
</span>
</div>
the only prob is that container have to have set height.
Like MaRiz said, you should use a table in this case and set the CSS property: border-collapse: collapse;