文字不會移動到圖像上

Question

我試圖使用CSS和HTML來獲取「這個文字在底部圖像的中心，但是不管我嘗試什麼，它都不會移動。和CSS。

<table> 
    <th><a href="#home">Home</a>&nbsp </th> 
    <th><a href="#catalog">Catalog</a>&nbsp </th> 
    <th id="Unique"><a href="#specials">Specials</a>&nbsp </th> 
    <th><a href="#contact">Contact Us</a>&nbsp </th> 
    <th><a href="#about">About Us</a>&nbsp </th> 
    <th><a href="#signin">Sign In</a>&nbsp </th> 
    <th><img src=" cart.png" height="20" width="20" href="www.google.com" /> </ th> 

</table> 
<div class="hoverinfo"> 

    <p> 
    <a href="www.google.com" class="one">Power User</a></p> 

</div> 
<a href="www.google.com" class="two"> 
    <font color="blue">This </font> 
</a> 

<img src="both.jpg" style="float: left; width: 100%; height: 100%;margin-right: 1%; margin-bottom: 0.5em;"> 




<p style="clear: both;"> 

Answer 1

我覺得這是你所要求的東西。我加CSS到一個div容器。它所做的是文本對齊中心。

.two-con { 
 
    text-align: center; 
 
}

<table> 
 
    <th><a href="#home">Home</a>&nbsp </th> 
 
    <th><a href="#catalog">Catalog</a>&nbsp </th> 
 
    <th id="Unique"><a href="#specials">Specials</a>&nbsp </th> 
 
    <th><a href="#contact">Contact Us</a>&nbsp </th> 
 
    <th><a href="#about">About Us</a>&nbsp </th> 
 
    <th><a href="#signin">Sign In</a>&nbsp </th> 
 
    <th><img src=" cart.png" height="20" width="20" href="www.google.com" /> </ th> 
 

 
</table> 
 
<div class="hoverinfo"> 
 

 
    <p> 
 
    <a href="www.google.com" class="one">Power User</a></p> 
 

 
</div> 
 

 
<div class="two-con"> 
 
    <a href="www.google.com" class="two"> 
 
    <font color="blue">This </font> 
 
    </a> 
 
</div> 
 

 
<img src="both.jpg" style="float: left; width: 100%; height: 100%;margin-right: 1%; margin-bottom: 0.5em;"> 
 

 

 

 

 
<p style="clear: both;">

CSS：

a:hover{ 
color: red; 

} 
a { 
text-decoration: none; 
color: white; 
} 

table{ 

border-color: black; 
height: 30px; 
width: 100%; 
background-color: black; 
border-radius: 5px; 
color: white; 
} 

#Unique{ 
    background-color: #D4AF37; 
    border-radius: 5px; 

} 

.hoverinfo { 
position: absolute; 
top: 330px; 
left: 565px; 
bottom: 100px; 
font-size: 36px; 
font-family: cursive; 
color: black; 
cursor: pointer; 

.hoverinfo p { 
display: none; 
color: black; 
} 

.hoverinfo:hover p { 
background-color: yellow; 
display: block; 
color: black; 
} 

.two { 
position:absolute; 
text-align:center; 
top:500px; 
left:596px; 

bottom: 100px; 
font-size: 56px; 
font-family: cursive; 
color: black; 
cursor: pointer; 

.two p { 
display: block; 

color: black; 

} 

.two:hover p { 
background-color: yellow; 
display: block; 
color: black; 
}