I'm having a very strange problem. I'm simply trying to use Ids and Classes to edit my HTML with CSS and for some reason it's not being recognized. Here is the HTML I've used.
<p class="Benefits" ><center>Benefits of First Person Shooters</center></p>
Here is the CSS
.Benefits {
font-size: 60px;
}
Id's won't respond either.
Putting center tag inside a paragraph creates invalid markup which browsers try to fix. Also:
The 'center' tag is not supported in HTML5. Use CSS instead.
.Benefits {
font-size: 60px;
text-align: center;
}
<p class="Benefits">Benefits of First Person Shooters</p>
Added center selector has the same font-size as Benefits class
.Benefits, center {
font-size: 60px;
}
<p class="Benefits" ><center>Benefits of First Person Shooters</center></p>
If you inspect the HTML, you'll notice that the center tag is placed OUTSIDE of your paragraph. Add the class/id to the center tag rather than the paragraph, or use CSS to center the text rather than having a center tag.
Because it's within the "center" element. Put your class within "center".
Related
I want the header of a paragraph to be centered, but I can´t get it working.
The whole and the paragraph have the property text-align:left and the header has text-align:center but still it´s not centered.
body{
text-align:center;
}
main{
text-align:left;
}
b{
text-align:center !important;
}
<main>
<b>Header:</b>
</main>
Can somone give me some advice what I´m doing wrong or missing?
Put a div around it. The <b> tag cannot be centered.
body {
text-align: center;
}
main {
text-align: left;
}
.header {
text-align: center !important;
}
<main>
<div class="header">
<b>Header:</b>
</div>
</main>
A <b> element is display: inline by default.
The text-align property says: Applies to: block containers.
It therefore has no effect on a <b> element by default.
You need to apply it to a block container instead. There are three ways to do this:
Find (or add) an ancestor element which is a block container
Change the <b> (using the CSS display property) so that it is a block
Replace the <b> with a different element which is a block.
In this case, the apropriate thing to do is to replace the <b>.
You should select markup based that describes what content is and not how it should look. (This has been true since CSS 1 was released in 1996 and began the process of separating style from structure in webpages).
You have been calling the element "the header". HTML provides elements specifically for that purpose.
Aside from the <header> element itself, there are the <h1> - <h6> heading elements.
You content makes it look like an <h1> would be appropriate.
h1 {
text-align: center;
}
<main>
<h1>Header</h1>
</main>
You can also remove the !important flag. It is usually more trouble than it is worth and provides no benefit here.
header seems a better tag to group "introductory or navigational aids...heading elements but also other elements like a logo, a search form, and so on.", documentation at MDN.
main would be better suited for "content...unique to the document, excluding any content that is repeated across a set of documents such as sidebars, navigation links, copyright information, site logos, and search forms (unless the document's main function is as a search form).", documentation at MDN.
To be clear, text-align property is inherited by child elements, documentation at MDN.
That said, consider the following code:
body{
text-align: center;
}
header{
text-align: left;
}
h1{
text-align: center;
}
<header>
<h1>Header:</h1>
<p>Content in a paragraph (should be left aligned, inheriting from `header`)</p>
</header>
A easy solution may be using positioning. Something like this:
body {
text-align:center;
position: relative;
}
main {
text-align:left;
}
b {
position: absolute;
left: 45%;
}
Another solution would be to just
display: block
the b element.
You can not align b tag content.
Just change in your jsfidle like this.
html
<main>
<p><b>Header:</b></p>
</main>
and css
p{
text-align:center !important;
}
It looks like the text-indent for div is 0px ( which is the default body text-ident size), but why it is inheriting body element? why it is not inheriting P element who is the parent of div, setting text-indent to 32px?
p {
text-indent: 32px;
}
div {
text-indent: inherit;
}
<p>In my younger, he told me, ,
<div>'just remember that all the people in this world haven't had the advantages thatyou've had.'</div>
</p>
You cannot insert "div" tag inside "p" tag that is not valid in html. but you can insert "p" tag inside "div" tag. If you want the child element to inherit the "p" element property just change the "div" to "p".
The text-indent property specifies the indentation of the first line in a text-block and no all lines.
read more : https://www.w3schools.com/cssref/pr_text_text-indent.asp
Syntactically, a div inside a p is invalid in all standards of HTML.
read More : Nesting block level elements inside the <p> tag... right or wrong?
you can use span instead of div.
Like this :
p {
margin-left: 32px;
}
<p>In my younger, he told me,<br><br>
<span>'just remember that all the people in this world haven't had the advantages thatyou've had.'</span>
</p>
If you want use div Insistence,use margin-left for indent.
p {
text-indent: 32px;
}
div {
margin-left: 32px;
}
<p>In my younger, he told me,
<div>'just remember that all the people in this world haven't had the advantages thatyou've had.'</div>
</p>
Use <span> instead of <div>
You cannot insert <div> tag inside <p> that is not valid in html.
<p>In my younger, he told me, ,
<span>'just remember that all the people in this world haven't had the advantages that you've had.'</span>
</p>
Hope this will help you
Here is your answer as per your comment,
why I can't put a div inside a p?
Because <p> is a block level element, and it is used for displaying text, it won't allow any other block level elements inside it,
but you can use inline elements like <span> and <strong>
I am having a problem with alignments here. I have jQuery populating a field for me. I want to add the degree symbol which I did with an HTML Entity. For some reason, when I give both items the display:inline property the text-align:center; property is ignored. Can anyone explain why and how to fix? Here is the code in question...
HTML
<h1 class="curr-temp" id="farh"></h1><h1 class="curr-temp">°</h1>
<button id="switch">F/C</button>
CSS
.curr-temp {
display:inline;
text-align:center;
}
Because when you set display:inline, the width of .curr-temp is only as wide as the contents within it, so alignment becomes mostly irrelevant. And because you have both of those elements set to be h1, you are replacing the standard h1 default of display: block;.
If you want them centered and inside of an h1, modify the markup like so:
h1 {
text-align: center;
}
<h1><span class="curr-temp" id="farh">5</span><span class="curr-temp">°</span></h1>
<button id="switch">F/C</button>
This wraps both elements inside your desired h1, which will preserve the text-align: center;, but still gives you the markup id and class required to make your changes via jQuery.
You can Wrap both of two H1 tag inside of tags.
When you set "inline" property for h1 or other head tags, then they will not have 100% width of wrapper. Couse of this will not be centered.
So, I've looked around SO, and I've found the inverse of this question mostly everywhere. That makes me feel this is either a rarer occurrence, or something trivial that I just can't figure out.
https://jsfiddle.net/je5dpqrL/
The above jsFiddle shows that I have an <h2> element within which I've put an anchor tag with the pull-right class of Bootstrap. Since I want the anchor to display in a smaller font, I'm using font-weight and font-size. Now, since it's floating, the text is centered.
Is there any way to align the text so that the baseline of the Title and the <a> element is the same?
You can adjust the vertical position of the <a> with line-height (and use for example em to make it relative size):
.cl {
font-weight: normal;
font-size: 40%;
display: inline-block;
line-height:4em
}
This is what you need https://jsfiddle.net/p05bu4c2. Create a span inside the link
.cl {
font-weight: normal;
font-size: 40%;
display: inline-block;
}
.cl span {
line-height: 1;
vertical-align: bottom;
}
h2 {
border:1px solid #ff0000;
}
<h2>Title <a class='pull-right cl'><span>Stuff</span></a></h2>
So, The following code seems to work:
<h2>Text<a class="pull-right"><span class="text-right" style="display:inline-block">Test</span></a></h2>
Turns out that adding an .inside-block to an element inside the .pull-right class seems to fix it. No need to play around with line-heights
JSFiddle: https://jsfiddle.net/je5dpqrL/10/
EDIT: Thanks to Diamond for this suggestion of adding an element inside the <a> tag, although the CSS is completely different from the one suggested by him.
I have an <a> element nested within a <span> element. The <a> element occurs after some lines of text followed by two line breaks (<br>). So while the initial text within this <span> element needs to be text-align: left, I'd like to know if there is a way to change the formatting for the subsequent <a> element to be text-align: center.
I am using CSS to modify the formats and have succeeded in changing the color and text-decoration of the <a> element (independent of the former text), so I know that my code is pointing to the correct element, but when I try to alter the alignment it will not work for me...
Please hit me with potential solutions.... Thank you.
Use display: block; it will allow the a element to text-align
a {
display: block;
text-align: center;
}
jsFiddle Demo