The "text-align: center" isn't working in a span element - html

I haven't done HTML and CSS for a while so I may be forgetting something, but for some reason a "style" tag with the "text-align" property set isn't working even in the simplest context. I'm about to show you the whole, entire file that I have but my problem is only in the two comments I have. Don't worry about the other stuff; it's for a little passion project I'm working on.
So here is the whole file. I have a lot of stuff in it that isn't relevant nor important; just focus on the code in the two comments.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>JSON Generator</title>
<link rel="stylesheet" href="web_mod.css"></link>
</head>
<body bgColor="#E3E3E3">
<!--Start here-->
<span style="text-align: center">Coded by AnnualMelons</span><br>
<!--Finish here-->
<span style="color: red; background-color: #2CE65A">Use this generator to generate the code required to create a JSON message.<br>
Fill in the blanks to generate the code. The generator will guide you through it as you go along. Have fun!</span>
<script>
</script>
</body>
</html>
The "Coded by AnnualMelons" part is supposed to be in the center but it's not. At least for me it's not.
I know that the other part of the file isn't relevant but I figured I might as well show you as it may be an external problem.
I'm sure I'm just making a silly mistake because I haven't done this for a while, but it's not working... so yeah. I'm using Firefox as my web browser in case that helps.
Thanks!

The <span> Element is, by default, an "inline" element. Meaning unlike block level elements (<div> <h1> <p> etc.) the span only takes up as much horizontal space as its content.
text-align: center IS working, but you're applying it to an element that doesn't have a width greater than its content (as all block elements do).
I recommend either changing the span to a <p> element, or specifying the display: block property on your span.
Here's a JSfiddle to demonstrate that both a <span> with display: block; text-align: center and a <p> with text-align: center; achieve the same effect.
Hope that helps!

Use a p or div rather than a span. Text is an inline element and so is a span. For text-align to work, it must be used on a block level element (p, div, etc.) to center the inline content.
example:
<div style="text-align: center">Coded by AnnualMelons</div><br>

Use this in style
margin-left: 50%;
example-
<span style="margin-left: 45%;">Centered Text</span>

.span {
text-align: center;
width: -webkit-fill-available;
}
This Worked for me and the text inside my span tag is now aligned to the center.

Related

Making HTML <div> tag not take the entire length of the page

I am in the process of making my own website, and I am making it out of pure HTML. I encountered in the making of the page, as I will describe below.
Here's my code for reference :-
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<style>
.sideDiv {
border: 1px outset black;
background-color: white;
text-align: center;
width: 120;
height: 400;
}
</style>
<style>
.mainDiv {
border: 1px outset black;
background-color: white;
text-align: left;
width: 400;
height: 300;
}
</style>
<img src="AyushLogo.png" alt="logo" height="9.2%" width="9.2%" style="float:left">
<br>
<a><button>About Me</button></a>
<a><button>Games</button></a>
<a><button>My Blog</button></a> <br><br>
<hr>
</head>
<body>
<div class="sideDiv">
</div>
<div class="mainDiv">
<p>Hi,<br>My name is Ayush Bhatt.<br><br>I love to code and remake old games. You can view some of my games by clicking on the 'Games' button on the top bar.</p>
</div>
</body>
</html>
The output looks like this :-
I wanted the tag with the "mainDiv" properties to appear at the side of the one with the "sideDiv" properties, but it just doesn't want to.
PS : I want to use only HTML as long as possible
An important thing about <div> tags is that they are known as "block-level" elements, which in particular means that they always start on a new line and take up the full width available, regardless. With this in mind,
writing
<div class="sideDiv"></div>
<div class="mainDiv">
...
</div>
should result in a div with class sideDiv and width as defined in the class, and then a new div with class mainDiv started on a new line, as block-level elements do by default, though note that this is simultaneously also because the div with class sideDiv takes up the remaining width on the page as a block-level element (though its content width is as described in the class, it being a block-level element is a bit like it "reserving" the rest of the width even though its content only uses the amount defined), so the next element (block level or inline) can only start on at least the next line.
If you want to circumvent this behavior, there are many ways to do it. One is by using an external tool like bootstrap, as pointed out by another answer, but my favorite is to simply use flex box. This can be done for your code in this way
<div style="display: flex; flex-direction: row;">
<div class="sideDiv"></div>
<div class="mainDiv">
...
</div>
</div>
A method that directly overwrites the block-level property would be to set the style display: inline-block; for both divs, to prevent either from starting on a new line or taking up the whole available width by default. (Just one isn't enough, if you only set it on the first one, the second still starts on a new line by default, and if you only set it for the second one, the first still takes up all available width by default). However, this causes the element to be treated completely as an inline element besides the fact that block-level height and width can be applied, and can be strange/difficult to maneuver as a result. It is often easier to just use a flex box. Code for this would be
<div class="sideDiv" style="display: inline-block;"></div>
<div class="mainDiv" style="display: inline-block;">
...
</div>
However, note that <p> is also a block-level element, so directly substituting in your original code in the mainDiv div would still cause it to skip a line before displaying. Again, it is usually easier, more modern, and better looking to just use a flex box.
Edit: Added the detail about block-level elements taking up all available width, and fixed the incorrect initial method that changed the display property to overwrite the block-level property by setting display: inline;. This can work, but it will ignore the heights and widths of the <div>s.
try using bootstrap , it deals with layout perfectly , here is an example :
<div class="container">
<div class="row">
<div class="col-md-6">
this is the left section
</div>
<div class="col-md-6">
this is the right section
</div>
</div>
</div>
for more details check :
https://getbootstrap.com/docs/5.0/layout/grid/
NOTE : you will need to include bootstrap and jQuery libs , check for online tutorial to start using bootstrap

Use CSS to replace the content of elements based on the content of another

I'm trying to write some CSS that might take the page title (defined by a h1 element's content) and stick that content into every element with the class "DocTitle". I'm limited to using CSS and HTML.
Suggestions?
<head>
<style>
.DocTitle {
content: element(runningheader);
.pagetitle h1 {
position: running(runningheader);
}
</style>
</head>
<body>
<div class="DocTitle"></div>
<h1 class="pagetitle">This is the page title</h1>
<span class="DocTitle">This should be replaced</span>
</body>
Based on research, I would have thought this might have worked, but I think it only works if you use page at-rules, and I don't think I can apply content to a class in an at-rule. I'm not 100% on that though, because I'm not really sure what I can and cannot do in an at-rule. For reference, this is for use in generating print media.

CSS: How to override a class style with an enclosing div

I have a P element with style which I can't change.
I want to enclose it with a DIV to enforce a new font-size.
Why does the inner P ignore the div font-size?
Example:
<html>
<head>
<style>
.para1 { font-size:small; }
</style>
</head>
<div style="font-size:300% !important">
<p class="para1">I must have been asleep, for certainly if I had been fully awake I must have noticed the approach to such a remarkable place. In the gloom the courtyard looked of considerable size, and as several dark ways led from it under great round arches it perhaps seemed bigger than it really is. I have not yet been able to see it by daylight.</p>
</div>
</html>
You can set a class to the wrapping div, like I did here:
http://jsfiddle.net/3Zvrg/
HTML:
<div class="out_of_para1">
<p class="para1">
CSS:
.out_of_para1 p {font-size: 300%;}
EDIT: based on last comment from OP
I know you cant change the class but why cant you do this.
<div style="font-size:300% !important">
<p>I must have been asleep</p>
</div>
and not associate your "p" with any class??
Styles are only inherited if the value of the property is inherit. On the paragraph, the value of the property is small. Thus the font size of the div is 300% but the font size of the paragraph is small.
You have to explicitly set the font size on the paragraph element.
You could do this with a descendent selector in the stylesheet:
div .para1 {
font-size: 300%;
}

Why does absolute positionining within <button> works differently from <div>

I expect following code to put my span to the top-left corner of the button, but it doesn't. Why is that?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type='text/css'>
</style>
</head>
<body>
<button style='height:100px;width:100px;position:relative;'>
<span style='position:absolute;top:0;left:0;'>text</span>
</button>
</body>
</html>
<span> is placed relative to the vertical-middle line (with 3px padding I can't explain).
Replacing <button> with <div> does places <span> at the top-left corner.
Question: why does absolute positioning within button (with position:relative) behaves differently from layout using <div>? And how do I fix it?
Background: I use two absolutely positioned div's within button to create a floating-width button with rounded corners.
EDIT: IMPORTANT IE 8.0 works exactly as I expect it (span in the top-left corner), the problem I see is in Firefox (3.6.6).
I advice against using a <button> this way. It is really difficult to style and you'll end up having to write specific styles for different browsers.
I needed to achieve something very similar and after dealing with a large amount of exceptions and fiddly positioning to accommodate different browser rendering, I went for this structure instead:
<div class="button">
<span>
<button>Text</button>
</span>
</div>
With the button tag reset this way:
button {
background:none repeat scroll 0 0 transparent;
border:0 none;
font-family:inherit;
font-size:inherit;
font-weight:inherit;
margin:0;
overflow:visible;
padding:0;
position:relative;
}
You can even use js to wrap the <button> on page load. This system has turned out to be much more solid and reliable. Requiring less css and almost no browser specific styling.
Update:
As I commented below, the wrapping element should not be an <a> tag. Remember that we need the <button> to keeps its functionality, we just need it to be text only (form will still submit on enter).
You can still re-use any css that you may be using to turn standard links into expandable button widgets only in this case it;s a <div> instead of an <a>.
Your problem is only with Firefox?? (3.6.6) - Can't fix it with standard CSS. Try:
button::-moz-focus-inner {
border: 0;
padding: 0;
}
That will do it for Firefox hopefully. Good luck!

IE6 anchor wordwrapping (display:block, width:0)

Unfortunaly this site we're developing has to be IE6 compatible. It contains a horizontal block style menu, but there's still one more problem with IE6.
I have the following code:
<html>
<head>
<style type="text/css">
a {
display: block;
width: 0px;
background-color: red;
}
</style>
</head>
<body>
This is a anchor tag
</body>
</html>
Because of the spaces, it wraps every word on a new line. What do I need to do if I want it on a single line only?
Thanks!
Add this css on the a element:
white-space: nowrap
Have you tried popping your anchor into a span or div?
Well, don't set its width to 0 would be the cross-browser proper approach.
Use float: left instead, if you want the anchor to be displayed in block mode but not allocate 100% width.
When you use floats like that, you also need to make sure you clear them, to make them occupy space in their container:
<div>
<a ... />
<a ... />
<div style="clear: both;"></div>
</div>