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.
Related
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'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".
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
I'd like a generalized solution that will always limit the clickable link area to the text of my h2 text. Note that the issue is that when you hover over or click on the space to the right of the text you are still on a clickable area.
Here is an example:
markup:
<a href="#p1">
<h2 class="page services">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h2>
</a>
css:
h2.services {
font-size: 16px;
}
Here is a demo:
http://jsfiddle.net/j7n3k/
ps - no js or jquery please. Only css and responsive solutions only if possible. Thanks!
You should put the <a> tag inside <h2>. By default, headings have display set to block, which means they will automatically take up all the horizontal space available if the width is not set explicitly. The link contains the heading, so the browser assumes the whole area is a link. If you insert <a> into <h2>, then it wraps only the text and not the entire heading.
<h2 class="page services">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h2>
this will stop it from expanding:
h2.services {
font-size: 16px;
display: inline-block;
}
http://jsfiddle.net/vimes1984/j7n3k/4/
Read up on the display property and the position property.
DISPLAY
https://developer.mozilla.org/en-US/docs/Web/CSS/display
POSITION
https://developer.mozilla.org/en-US/docs/Web/CSS/position
To style:
you can use
.services{
/*this will style any element with a class of services*/
}
.services a{
/*this will style any a inside of a element with a class of services*/
}
Hi,
I have the following HTML :
<div class="controlTitleContainer ">
<label for="test">Titel</label>
<div class="q"> </div>
</div>
The CSS looks like this
.controlTitleContainer .label
{
font-size: 0.94em;
color: #778899;
display:inline;
}
.controlTitleContainer .q
{
background-image: url("Images/Common/Icons/questionMark_15x14.png");
height: 14px;
width: 15px;
float:left;
}
The problem is that the div will be placed to the left of the label instead of to the right? Why?
I have tried to switch the div to a span with no success. Also If I change the div to a img intead then it will work but there is some unvanted margins that I can´t remove with the div element.
Pleas advice
Edit1: The confusions in the question should now be fixed, sorry for that.
MySolution : I created two div elements (one for text and one for icon) and then set float to left on both.
You're quite confused. You talk about IMG in question title, then you present SPAN in your code and afterwards talk about DIV in your text.
But I guess all three refer to SPAN in your code since you do set a background image to your SPAN element.
Solution
Anyway. Your span is floated left according to your CSS. If you remove the following line in your style sheet, your span will appear to the right of your label:
float: left; /* <- remove this */
Edit: I suppose your question got downvoted due to this confusion. If you want the community to help with detailed answers the least you could do is to take the time to formulate your question with the same amount of care as you expect back.
Do you not want the image to the right of the label? You have specified float: left;. You may also want to change .label to label in line one of the css code.
You could use the "CSS :after Selector"
Link : http://www.w3schools.com/cssref/sel_after.asp
Floats can be tricky... I would just make sure that the label is inline or inline-block, and that your image or image container also is inline or inline-block. They would then be aligned as text on a row. Yeay!