CODEWITHSUNDEEP
htmlcsstransformblur
I1m3a7n92
I1m3a7n92

Reputation: 51

Text gets blurry when using transform(-50%,-50%) to center the section

I use this code to center a section : (This is the only way I can do to center this section )

<div class="clock-section">
          <h5 id="clock-title">We are coming really soon</h5>
                <hr class="hr" id="cdhr">
              </div>

CSS :

.clock-section {
    position:absolute;
    top:50%;
    left:50%;
     transform:translate(-50%, -50%);
}

The section is centered well , but the problem is that the text gets blurry and also the hr looks ugly and blurry,
I have tried all methods like webfont smooth etc, but didn't work at all ! :(
Can anyone help me ?
Thanks ...

Upvotes: 5

Views: 1122

Answers (2)

u238
u238

Reputation: 363

I have tried all of solutions, sometimes they worked sometimes didn't. Finally I gave up to use this method to center elements. Instead of using transform try this :

width: 50vw;
height:50vh;
position: fixed;/*or absolute*/
margin:25vh 25vw;

This code centers the main element on screen. You can use flex or another solution to center inside elements...

Upvotes: 1

cocoa
cocoa

Reputation: 3921

From a different question, the answer was

h5 {
  background: transparent;
}

Not sure if that is the answer in your case.

EDIT: Or how about this?

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

Upvotes: 1

Related Questions