Text cannot be aligned

Question

Text cannot be aligned

I recently encountered an issue where I center-aligned some text and positioned it using top:20%. Everything was working fine until I added a paragraph under it. At that point, the element moved back to its original position and the top:20% positioning didn't take effect.

    <style>
    .yes{
            width : 100%;
            height : 50%;
            background-color: red;
            text-align: center;
        }
        .yes a{
            font-size : 300%;
            position: relative;
            top : 20%;
        }
    </style>

    <div class = "yes">
    <a>Title</a>
    <p></p></div>

Update: Strangely, on jsfiddle, the div does not display as 50% in height which makes it difficult to see the issue I'm facing. Here is a link to view the code. If you remove the p tag, you will be able to observe the effect clearly:

html css web

Answer 1

Answer №1

Looking to test and confirm the behavior? The code snippet provided functions well in the latest version of Chrome. There is no movement of the title after the paragraph is added.

UPDATE: The issue described can be replicated when using a tall wrapper. The solution is simply to set the a element's display property to block.

    .wrp{height:400px;}
    .yes{
            width : 100%;
            height : 50%;
            background-color: red;
            text-align: center;
        }
        .yes a{
            display:block;
            font-size : 300%;
            position: relative;
            top : 20%;
        }

<div class="wrp">
    <div class="yes">
        <a>Title</a>
    </div>
</div>
<hr>
<div class="wrp">
    <div class="yes">
        <a>Title</a>
        <p></p>
    </div>
</div>

Answer 2

Looking to test and confirm the behavior? The code snippet provided functions well in the latest version of Chrome. There is no movement of the title after the paragraph is added.

UPDATE: The issue described can be replicated when using a tall wrapper. The solution is simply to set the a element's display property to block.

    .wrp{height:400px;}
    .yes{
            width : 100%;
            height : 50%;
            background-color: red;
            text-align: center;
        }
        .yes a{
            display:block;
            font-size : 300%;
            position: relative;
            top : 20%;
        }

<div class="wrp">
    <div class="yes">
        <a>Title</a>
    </div>
</div>
<hr>
<div class="wrp">
    <div class="yes">
        <a>Title</a>
        <p></p>
    </div>
</div>

Answer 3

Answer №2

It's important to remember that styles should be enclosed within a class tag, not an id tag.

<html>
<head>
    <style>
        .example{
            width : 100%;
            height : 50%;
            background-color: red;
            text-align: center;
        }
        .example a{
            font-size : 300%;
            position: relative;
            top : 20%;
        }
    </style>
</head>
<body>
    <div class="example">
        <a>Title</a>
        <p></p>
    </div>
</body>
</html>

Check it out in action

The key difference here is: Ids should be unique and only assigned to one element in the document, while classes can be applied to multiple elements in the DOM.

Answer 4

It's important to remember that styles should be enclosed within a class tag, not an id tag.

<html>
<head>
    <style>
        .example{
            width : 100%;
            height : 50%;
            background-color: red;
            text-align: center;
        }
        .example a{
            font-size : 300%;
            position: relative;
            top : 20%;
        }
    </style>
</head>
<body>
    <div class="example">
        <a>Title</a>
        <p></p>
    </div>
</body>
</html>

Check it out in action

The key difference here is: Ids should be unique and only assigned to one element in the document, while classes can be applied to multiple elements in the DOM.

Text cannot be aligned

Answer №1

Answer №2

Similar questions

The columnFilter plugin in Datatables is failing to initialize

Only apply the CSS rule to all pages except for one

Steps for executing a function when a directory is clicked

showcasing the picture in the email is consistently

Styling with CSS and using templates

Text overlapping image causing hover state interference

A guide to accurately accessing form data in Jquery Ajax requests

Ways to ensure that a div, header, container, and other elements completely cover the viewport

Fonts displayed on websites may look different on Mac compared to Windows

Dynamic CSS view size parameter

What is the best way to show a left and right arrow on a mobile website page?

The functionality of anchor links created through ajax is not operating correctly

Tips on altering hover effects?

Guidance on utilizing jQuery to display values depending on a dropdown selection

Ensure HTML5 video fills window completely without any overflow

The navigation and title refuse to align in the center

Chrome not displaying Bootstrap dropdowns correctly

What could be the reason my CSS and Javascript animation is not functioning properly?

Is it possible to animate the change in background color dynamically using jQuery?

What could be causing the issue with the width: 100% not rendering correctly in this