How to align text without overriding <centre> - html

I'm trying to align some text in HTML left, but I also want it to stay in the centre. When I align the text left, it overrides .
<center>
<b>
<BR>
<p style=color:orange;font-size:62px;text-align:left;"> If Bitcoin is now £0,<BR> and it was £0 when <BR>
I purchased, and I <BR> invested £0, the total <BR>
investment would be <BR>
worth £0, <BR>
The profit would be £0.</p>
</font>
</b>
</centre>
When text-align:left; is in there, the text aligns, but it also isn't in the centre anymore.
Any help would be appreciated!
EDIT: I want to align the text left, but it be in the centre of the page like this:
like this:

Try this: you can use a div (.wrapper) to keep the content in the center while you can align it wherever you want :)
.wrapper{
width: 300px;
margin: auto;
background-color: red;
}
.wrapper{
text-align: left;
}
<div class="wrapper">
<div>Aligned text</div>
</div>

Well, you can specify a width for your paragraph, and set its margins left and right to be auto:
.center {
width: 80%;
margin:10px auto; /* So 10px for top/bottom, auto for left/right */
color:orange;
font-size:62px;
text-align:left;
}
<b>
<br/>
<p class="center"> If Bitcoin is now £0,<br/> and it was £0 when <br/>
I purchased, and I <br/> invested £0, the total <br/>
investment would be <br/>
worth £0, <br/>
The profit would be £0.</p>
</b>
Side note: Your HTML code has a few syntax/formatting issues, like:
<center> tag closed as <centre> instead of <center> (well you shouldn't use this tag in the first place as it's not supported in HTML5).
For line breaks, it's <br/>, not <BR>.
Also, the <b> tag is deprecated nowadays, use <strong> or CSS instead.

Related

How to have some text to the right of an image and some under it

I'm making a website and I've come across this problem: I need an image with dynamic size (25% to be exact) to have some text to the right of it and some under it.
I know that text can be put to the right of the image using float: right, but that makes it impossible to put any text always under the image.
Here's a jsfiddle: https://jsfiddle.net/7r51y7d4/2/
Since the image has a dynamic size, I can't just add lots of line breaks, because not only would the code be ugly, but it wouldn't work well on any device with a different screen resolution than mine.
Putting the image and the right text in a div won't help because the div will only wrap around the text, leaving the image sticking out through the div's border.
If JavaScript is needed, then so be it, however, I need a PHP-free solution. (pure HTML/CSS would be nice, though)
Looks like you want the div with clear: both CSS rule, for more info: https://www.w3schools.com/cssref/pr_class_clear.asp
img {
float: left;
margin: 8px;
}
.clear {
clear: both;
}
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
I want this text to be to the right of this image
</p>
<div class="clear"></div>
<p>
I want this text to be under the image
</p>
And here is the fiddle: https://jsfiddle.net/7r51y7d4/4/
Simply use clear:both to clear floating and the second text will go under the image :
img {
float: left;
margin: 8px;
}
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
I want this text to be to the right of this image
</p>
<div style="clear:both"></div>
<p>
I want this text to be under the image
</p>
You can use the clear property to specify that the text should be inserted after floating elements.
<p style="clear: both;">
Lorem ipsum
</p>
JSFiddle: https://jsfiddle.net/7r51y7d4/3/
Target your second paragraph with CSS and use clear:both;
FOR EXAMPLE:
HTML Code:
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
I want this text to be to the right of this image
</p>
<p id="secondParagraph">
I want this text to be under the image
</p>
CSS Code:
img {
float: left;
margin: 8px;
}
#secondParagraph {
clear:both;
}
I would also set your 25% width with CSS as well. It is best to do all styling externally with CSS, instead of in-line with HTML. Easier to manage.

Custom css for hr tag

I'm declaring css for hr tag like ..
hr {
height: 2px !important;
background-color: #A2B1B9;
width: 9%;
margin-left: 0px;
margin-top:auto;
}
But the width of the hr tag dosen't always need to be the same as per the text that it is supported with. Please refer to the screen shot.
In this case I can either supply differen width along with the hr tag using inline css like . But as inline css dosen't fit to the ethical standards of web development is there any other approach that I could follow to make it dynamic?
HI now try to this way
Create a class and used to this css .
it's the best option for your .
.customHr{
padding-bottom:5px;
border-bottom:solid 2px black;
display:inline-block;
vertical-align:top;
color:blue;
}
<p>Custom Text here</p>
<p><span class="customHr">Custom Text here</span></p>
<p>Custom here</p>
<p>Custom Text</p>
<p><span class="customHr">Custom</span></p>
<p>Custom Text here</p>
<p>Custom Text here</p>
Rohit Azad's answer is best, but if for "ethical" reasons you would rather use an hr, you can wrap it together with the text to get the same length.
div {
display: inline-block;
}
<div>
<span>Text here</span>
<hr>
</div>
<br>
<div>
<span>T-t-t-t-t-text here</span>
<hr>
</div>
You can use Underline instead by putting the text in tag and then custom css for that.

margin-left its not working

I'm still a beginner in css, and I'm trying to give some margin-left to my paragraph and <h2> but its not working.
I have a div with 700px and I want to give 10px of margin-left for my <p> and <h2> in relation to the image.
But its not working, can you give some help?
What Im trying:
My jsfiddle with the problem:
http://jsfiddle.net/2p9vw/5/
My html:
<div id="example">
<img src="images/image3.jpg" width="226" height="129" />
<h2>Example</h2>
<p>text here text here text here text here text here text here text here text here text here text here </p>
</div>
My css:
#example {width:690px; height:auto; font-size:16px; margin:15px 0 0 0;}
#example img{float:left;}
#example h2{float:right;margin-left:10px; font-size:16px; color:#444;}
#example p{ text-align:justify; margin-left:10px; }
I have a div with 700px and I want to give 10px of margin-left for my <p> and <h2> in relation to the image.
But its not working
It is working – you just don’t see it working.
Since your image is floated, that means any inline content will float around it – but the block elements like p and h2 still go over the full width, underneath your image – and that’s why you don’t see any effect of that margin, because it is “under” the image.
Simply give your image a margin-right of 10px instead. http://jsfiddle.net/2p9vw/4/

Set a Specific Width for An Article Text Area

<div id="textcontent">
<center>
<br /><p>........... ARTICLE IN HERE .........</p>
</center>
</div>
#textcontent {
margin-right: 25px;
}
#textcontent p {
margin-right: -24px;
width: 663px;
}
ARTICLE IN HERE will display an article posted by user.
Snapshot:
Problem:
A line of an article by pass the side boundries. How can i set specific fixed width so the text gets indented (moved to second line) automatically and doesn't pass the side borders?
Note: text area height gets expanded automatically as lines of text increase.
Extra Info:
<div id="posted_wrap">
<div id="posted_middle">
<div id="posted_top"></div>
<div id="textcontent">
<center>
<br /><p><?php echo $thread; ?></p>
</center>
</div>
<br />
<div id="posted_bottom"></div>
</div></div>
#textcontent p {
margin:0 auto;
text-align:center;
width: 663px;
Remove <center> as it's not needed, and is deprecated. Set your margin of your paragraph tag to have auto (left and right).
That code works. The code you posted works too - so you may have a positioning or float issue going on above the code you're struggling with.
If those black "chalk" lines are a background image you can add:
padding:0 10px (for example) to your <p> tag to keep the text inside further from the edges.

Problems Wrapping Text Around Image

I'm wrapping text around an image using markup something like this:
CSS:
#imgAuthor {
float:left;
margin: 0 15px 15px 0;
}
HTML:
<h2>Author Information</h2>
<p>
<img id="imgAuthor" src="..." alt="..." />
<b>Bob Smith</b>
</p>
<p>
Here is some bio information about the author...
</p>
This actually looks okay except that, if the text is shorter than the height of the image, my page footer is also wrapped around the image.
I want my footer to appear below the image. If I add <p style="clear:both"> </p> to clear the float, then I have too much space above my footer.
How can I clear the float and force any subsequent markup below my image without adding any more whitespace?
Add overflow: hidden to the CSS for the paragraph that contains the floating image. That will make the paragraph grow to fully contain the floated image. For example:
<h2>Author Information</h2>
<p class="inner">
<img id="imgAuthor" src="http://placekitten.com/200/200">
<b>Bob Smith</b>
</p>
<p>
Here is some bio information about the author...
</p>
And:
#imgAuthor {
float:left;
margin: 0 15px 15px 0;
}
p.inner {
overflow: hidden;
}
And a live version: http://jsfiddle.net/ambiguous/S2yZG/
Alternatively, you could stick a <div style="clear: both;"></div> right at the bottom of the paragraph but you should only use this in cases where you need the overflow to be something other than hidden. For example:
<h2>Author Information</h2>
<p>
<img id="imgAuthor" src="http://placekitten.com/250/200">
<b>Bob Smith</b>
<div class="cBoth"></div>
</p>
<p>
Here is some bio information about the author...
</p>
And:
#imgAuthor {
float:left;
margin: 0 15px 15px 0;
}
.cBoth {
clear: both;
height: 1px;
}
And a live version of this approach: http://jsfiddle.net/ambiguous/3yGxA/
Why does overflow:hidden work? From the CSS3 specification:
The border box of a table, a block-level replaced element, or an element in the normal flow that is a flow root (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same flow as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats [...]
Your <p style="overflow: hidden;"> satisfies the third condition so its bounding box is extended below the bottom of the floating image so that there is no overlap.
You were on the right path to try <p style="clear:both"> </p> but all you need to do is change the height and margins.
<div style="clear:both; height:1px; margin:0;"></div>
alternatively you can just add clear: both to the footer style and forget this markup.