Understanding the concept of the same div involves the use of the width property rather than the display property. When applying the text-align property, it affects all child elements within the container.
For instance, in the following code snippet:
<div>
<span>Text</span>
Text
</div>
span {
text-align: center;
}
The alignment is applied to the text content, not the span element itself. This results in the text being centered while the span remains in its default position, to the left and below the previous element.
To verify if the text-align property is successfully applied, inspect the child element using Developer Tools.
For a live demonstration, you can visit this Jsfiddle link: http://jsfiddle.net/afzaal_ahmad_zeeshan/eKrNt/
As observed in the example, the alignment property was applied to the child element, not the parent div.
Your code:
#div1 {
position: relative;
bottom: 10px;
left: auto;
text-decoration: overline underline;
display: inline;
text-align: center;
}
This code snippet clearly indicates that the text inside the designated div is being aligned to the center.
Additionally, the mouseover event functionality is typically incorporated within a function or script, triggered by the hover event or a similar action.