Текст центра при зависании

Question

У меня возникли проблемы с наведением текста. Когда я наводил текст на правой стороне, он заставляет наведение налево и создает эффект сглаживания.

Есть ли способ центрирования парить?

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

Я не знаю, почему вы дали float: left, чтобы не удалить и важно. Вот что вызывает это. Если вам действительно нужно float: left, то сделать это:

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

Snippet, который работает.

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

Попробуйте очистить поплавок и затем делая Div блок с полной шириной, чтобы соответствовать странице. Это позволит вам затем центрировать div на странице с выравниванием текста. Если вы хотите центрировать Копировать в середине, где размещен текст Span, возможно, вы можете сделать ширину размера текста диапазона, который можно было бы достичь, сделав диапазон и p одинаковой ширины.

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>