我有一份分成三欄的文件。我在左右兩列的A或SPAN中有圖像，在中間一列有文本。外列有L和R類。
<!DOCTYPE HTML>
<html lang=en>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<TITLE>favorite things</TITLE>
<META name="KEYWORDS" CONTENT="filk">
<style>
p {
left:20%;
position:relative;
right:-20%;
margin-left:2em;
width:60%;
}
p.drop {
margin-left:2em;
}
p.drop::first-letter {
font-size:2em;
margin-left:-2em;
}
a.L,div.L,span.L {
display:inline;
--width:14%;
width:var(--width);
position:absolute;
left:-20%;
}
a.R,div.R,span.R {
display:inline;
--width:14%;
width:var(--width);
position:absolute;
right:00%;
}
h1 {
text-align:center;
font-size:4em;
}
img.V {
display:block;
height:auto;
margin:10% 10% 10% 10%;
max-width:90%;
width:100%;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 102%;
left: -25%;
margin-left: -40%;
Min-width: 20em;
max-width: 70em;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
.L .tooltiptext {
left: -25%;
text-align: left;
}
.R .tooltiptext {
right: 0%;
text-align: left;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
width: 1px;
}
.L .tooltiptext::after {
left: calc(--width * (2/3));
}
.R .tooltiptext::after {
left: 30%;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.verse {
font-size: 2em;
text-align: center;
width:60%
}
</style>
</head>
<BODY LANG="en-US" DIR="LTR">
<H1>My favorite things</H1>
<p>
[Verse]
</p>
<p class="drop verse">
Gardening
<a class=tooltip >
spiders
<span class=tooltiptext>
Ungoliant, who took the form of a giant spider and, along with Dark Lord Melkor, destroyed the Two Trees of Valinor
</span>
</a>
<a class=L >
<img class=V src="../Images/Silmarillion.png"
alt="The Silmarillion">
</a>
<br>
<a class="R tooltip" >
<img class=V src="https://upload.wikimedia.org/wikipedia/en/8/8e/The_Fellowship_of_the_Ring_cover.gif"
alt="The Fellowship of the Ring">
<span class=tooltiptext>
Elendil's sword Narsil, called <q>The Sword that was Broken</q> after
its damage in a battle against Sauron, and later caried by
Aragorn (<q>Strider</q>).
</span>
</a>
And
<a class=tooltip >
swords that are broken
<span class=tooltiptext>
Elendil's sword Narsil, called <q>The Sword that was Broken</q> after
its damage in a battle against Sauron, and later caried by
Aragorn (<q>Strider</q>).
</span>
</a>
<br>
Words in the
<a class=tooltip >
Black Speech
<span class=tooltiptext>
The Black Speech of Mordor is a language constructed by Sauron.
</span>
</a>
<br>
That must not be spoken
<br>
<a class=tooltip >
Unfaithful stewards
<span class=tooltiptext>
Denethor, the 26th ruling Steward of Gondor.
</span>
</a>
<br>
<a class="L tooltip" >
<img class=V src="../Images/81UzbZbGPUL._SL1500_.jpg"
alt="The Return of the King">
<span class=tooltiptext>
Denethor, the 26th ruling Steward of Gondor.
</span>
</a>
Who don't want their kings
<br>
These are a few of
<br>
My favorite things.
</p>
</BODY>
</HTML>要將工具提示和指針放在元素的中央，我認為您需要使用JavaScript來獲取元素的寬度，并相應地應用定位聲明。
在貼出我的回答后，我碰巧看到一篇關于CSS容器查詢的文章，想知道它是否可以用于此目的。事實上，我甚至不需要使用@container at-rule就成功地實現了它。
要使工具提示和指針在中間列的元素上方居中，請計算工具提示的一半寬度加上包含元素的一半寬度的負值，在本例中為left:calc(-10em+50%)；。
要將工具提示定位為與左邊緣或右邊緣齊平，您只需要適當的左和/或右聲明(在這種情況下，要覆蓋現有的聲明。)左:0；/左:自動；右:0；
要將指針置于左列和右列中的元素上方，請用container-type:inline-size；聲明一個包含上下文。然后使用容器查詢長度單位定位指針。50cqw是查詢容器寬度的50%。左:50cqw(請記住，容器的寬度包括容器內部元素(即子元素)的邊距、填充和邊框。)
我修改了你的CSS來幫助你朝著正確的方向前進。我的修改用/* & lt；- */
<!DOCTYPE HTML>
<html lang=en>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<TITLE>favorite things</TITLE>
<META name="KEYWORDS" CONTENT="filk">
<style>
p {
left:20%;
position:relative;
right:-20%;
margin-left:2em;
width:60%;
}
p.drop {
margin-left:2em;
}
p.drop::first-letter {
font-size:2em;
margin-left:-2em;
}
a.L,div.L,span.L,a.R,div.R,span.R { /* <- */
display:inline;
--width:14%;
width:var(--width);
position:absolute;
container-type: inline-size; /* <- */
}
a.L,div.L,span.L { /* <- */
left:-20%;
}
a.R,div.R,span.R { /* <- */
right:0;
}
h1 {
text-align:center;
font-size:4em;
}
img.V {
display:block;
height:auto;
/* margin:10% 10% 10% 10%; */ /* <- */
/* max-width:90%; */ /* <- */
width:100%;
margin-top: 10%; /* <- */
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
/* width: 120px; */ /* <- */
width: 20em; /* <- */
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 102%;
left: calc(-10em + 50%); /* <- */
/* left: -25%; */ /* <- */
/* margin-left: -40%; */ /* <- */
/* Min-width: 20em; */ /* <- */
/* max-width: 70em; */ /* <- */
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
.L .tooltiptext {
left: 0; /* <- */
/* left: -25%; */ /* <- */
text-align: left;
}
.R .tooltiptext {
left: auto; /* <- */
right: 0%;
text-align: left;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
width: 1px;
}
.L .tooltiptext::after {
/* left: calc(--width * (2/3)); */ /* <- */
left: 50cqw; /* <- */
}
.R .tooltiptext::after {
/* left: 30%; */ /* <- */
left: auto; /* <- */
right: 50cqw; /* <- */
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.verse {
font-size: 2em;
text-align: center;
width:60%
}
</style>
</head>
<BODY LANG="en-US" DIR="LTR">
<H1>My favorite things</H1>
<p>
[Verse]
</p>
<p class="drop verse">
Gardening
<a class=tooltip >
spiders
<span class=tooltiptext>
Ungoliant, who took the form of a giant spider and, along with Dark Lord Melkor, destroyed the Two Trees of Valinor
</span>
</a>
<a class=L >
<img class=V src="https://upload.wikimedia.org/wikipedia/en/thumb/d/db/Silmarillion.png/220px-Silmarillion.png"
alt="The Silmarillion">
</a>
<br>
<a class="R tooltip" >
<img class=V src="https://upload.wikimedia.org/wikipedia/en/8/8e/The_Fellowship_of_the_Ring_cover.gif"
alt="The Fellowship of the Ring">
<span class=tooltiptext>
Elendil's sword Narsil, called <q>The Sword that was Broken</q> after
its damage in a battle against Sauron, and later caried by
Aragorn (<q>Strider</q>).
</span>
</a>
And
<a class=tooltip >
swords that are broken
<span class=tooltiptext>
Elendil's sword Narsil, called <q>The Sword that was Broken</q> after
its damage in a battle against Sauron, and later caried by
Aragorn (<q>Strider</q>).
</span>
</a>
<br>
Words in the
<a class=tooltip >
Black Speech
<span class=tooltiptext>
The Black Speech of Mordor is a language constructed by Sauron.
</span>
</a>
<br>
That must not be spoken
<br>
<a class=tooltip >
Unfaithful stewards
<span class=tooltiptext>
Denethor, the 26th ruling Steward of Gondor.
</span>
</a>
<br>
<a class="L tooltip" >
<img class=V src="https://upload.wikimedia.org/wikipedia/en/thumb/1/11/The_Return_of_the_King_cover.gif/220px-The_Return_of_the_King_cover.gif"
alt="The Return of the King">
<span class=tooltiptext>
Denethor, the 26th ruling Steward of Gondor.
</span>
</a>
Who don't want their kings
<br>
These are a few of
<br>
My favorite things.
</p>
</BODY>
</HTML>