Zentrieren Sie Text auf Hover

Question

Ich habe Probleme mit Text Hover. Wenn ich den Text auf der rechten Seite übergebe, wird der Hover nach links verschoben und ein Glitching-Effekt erzeugt.

Gibt es eine Möglichkeit, die schweben zu zentrieren?

HTML

<div class="adress"> 
    <p class="copy"><span>Text Text Text</span></p> 
</div> 

CSS

p { 
    float: left; /* Important */ 
} 

.copy { 
    cursor: pointer; 
    text-align: center; 
} 

.adress:hover p.copy span { 
    display: none; 
} 

.adress:hover p.copy:after { 
    content: 'Copy'; 
    color: #fff; 
    background: #80bdf7; 
    border-radius: 3px; 
    font-size: 12px; 
    padding: 4px; 
} 

Demo - https://jsfiddle.net/rtzksobr/

Answer 1

Ich bin nicht sicher, warum Sie float: left nicht zu entfernen und wichtig gegeben haben. Das ist es, was es verursacht. Wenn Sie wirklich float: left brauchen, dann tun dies:

p { 
    float: left; /* Important */ 
    text-align: center; 
    width: 100%; 
} 

Snippet, die funktioniert.

p { 
 
    float: left; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
.copy { 
 
    cursor: pointer; 
 
    text-align: center; 
 
} 
 
.adress:hover p.copy span { 
 
    display: none; 
 
} 
 
.adress:hover p.copy:after { 
 
    content: 'Copy'; 
 
    color: #fff; 
 
    background: #80bdf7; 
 
    border-radius: 3px; 
 
    font-size: 12px; 
 
    padding: 4px; 
 
}

<div class="adress"> 
 
    <p class="copy"><span>Text Text Text</span> 
 
    </p> 
 
</div>

Answer 2

Versuchen Sie, den Schwimmer Clearing- und nehmen dann die div einen Block mit einer vollen Breite der Seite zu passen. Dadurch können Sie das div auf der Seite mit text-align zentrieren. Wenn Sie Copy in der Mitte des Platzierens des Span-Textes zentrieren möchten, könnten Sie vielleicht die Breite der Größe des Spannen-Textes machen, die erreicht werden könnte, indem Sie den Span und das p die gleiche Breite machen.

p { 
 
    float: left; /* Important */ 
 
} 
 

 
.copy { 
 
    cursor: pointer; 
 
    text-align: center; 
 
} 
 
     
 
.adress:hover p.copy span { 
 
    display: none; 
 
} 
 

 
.adress:hover p { 
 
    clear: left; 
 
    display:block; 
 
    width: 100%; 
 
    text-align:center; 
 

 
} 
 
     
 
.adress:hover p.copy:after { 
 
    content: 'Copy'; 
 
    color: #fff; 
 
    background: #80bdf7; 
 
    border-radius: 3px; 
 
    font-size: 12px; 
 
    padding: 4px; 
 
}

<div class="adress"> 
 
    <p class="copy"><span>Text Text Text</span></p> 
 
</div>