Question

我曾尝试使用CSS和HTML来获取“此文本覆盖在底部图像的中心，但无论我尝试什么，它都不会移动。我尝试在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;
}

文本不会在图像上移动

1 个答案: