0
我試圖在一張簡單的表中居中圖像上方的文本鏈接。我正在使用CSS的外部樣式表，並且嘗試了很多事情來簡單地將鏈接文本居中（Kinni Creek Lodge和River Guide Kayaks）並沒有取得成功。這裏是邊境表的擷取畫面以幫助觀察所發生的事情：麻煩居中文本鏈接在HTML表
下面是表的HTML代碼：
<center>
<table id="rentals">
<tr>
<td><a href="http://www.kinnicreek.com/" target="_blank">Kinni Creek Lodge</a></td>
<td><a href="http://www.riverguidekayaks.com/" target="_blank">River Guide Kayaks</a></td>
</tr>
<tr>
<td><img src="kinnicreeklogo.png" width="168px" height="140px"></td>
<td><img src="riverguidelogo.png"></td>
</tr>
</table>
</center>
而CSS：
#rentals {
text-align: center;
border-style: solid;
}
#rentals td {
border-style: solid;
}
編輯（完整代碼）：
<!DOCTYPE html>
<html>
<head>
<title>Explore the Kinni</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="slideshow.js"></script>
</head>
<body>
<center><div id="bannerdiv">
<img src="banner.png" id="banner"></img>
</div></center>
<br><br>
<div id="background">
<div id="header">
Kayaking on the Kinni
<hr>
</div>
<p class="clear">
<div class="menu">
<div class="menucontent">
<a href="index.html">Home</a>
<a href="kayaking.html">Kayaking</a>
<a href="fishing.html">Fishing</a>
<a href="hiking.html">Hiking</a>
<a href="skiing.html">Skiing</a>
<a href="info.html">Other Information</a>
</div>
</div>
<div class="content">
<p>There are many businesses in town that offer kayak rentals and guides! Kayak trips can last from one to six hours, and have challenges for beginning and advanced kayakers. The trips have a wilderness-like experience as the river has been well preserved.</p> <br>
<h1>Rental Companies</h1><br>
<center>
<table id="rentals">
<tr>
<td><a href="http://www.kinnicreek.com/" target="_blank">Kinni Creek Lodge</a></td>
<td><a href="http://www.riverguidekayaks.com/" target="_blank">River Guide Kayaks</a></td>
</tr>
<tr>
<td><img src="kinnicreeklogo.png" width="168px" height="140px"></td>
<td><img src="riverguidelogo.png"></td>
</tr>
</table>
</center>
<h1>Tips</h1>
<p>Do not bring anything that you would not want ruined. Items that are brought along on the river will most likely get water on them (including you!). Make sure to put electronics into a waterproof bag that floats. Additionally, bring food and espicially water for the mutliple-hour trips. One final recommendation is to <i>not</i> where flip flops as they will float away.
</div>
<div id="slideshow">
<div>
<img src="kayakingpics/image1.jpg">
</div>
<div>
<img src="kayakingpics/image2.jpg">
</div>
<div>
<img src="kayakingpics/image3.jpg">
</div>
<div>
<img src="kayakingpics/image4.jpg">
</div>
<div>
<img src="kayakingpics/image5.jpg">
</div>
<div>
<img src="kayakingpics/image6.jpg">
</div>
<div>
<img src="kayakingpics/image7.jpg">
</div>
</div>
<p class="clear">
</div>
</body>
</html>
CSS：
html {
height: 100%;
/* background: linear-gradient(#323A40, #272d32); */
background-image: url("background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
body {
}
#background {
background-color: rgba(153, 102, 34, .4);
background-size: cover;
border-radius: 50px;
border-color: #222211;
border-style: outset;
height: auto;
}
#bannerdiv {
}
#banner {
display: block;
margin: 0 auto;
}
#header {
width:800px;
margin-left: 250px;
padding-left: 150px;
font-family: 'Open Sans', sans-serif;
font-size: 350%;
color: black;
font-weight: bold;
text-shadow: 2px 2px #664422;
}
hr {
margin-top: 0;
margin-left: 150px;
width: 500px;
border-color: #332200;
}
.menu {
background-color: #ccbbaa;
width: 245px;
display: inline-block;
float: left;
border-radius: 0px 10px 10px 0px;
}
.menucontent {
}
.menucontent a {
display: block;
padding: 20px;
text-decoration: none;
color: #222211;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.menucontent a:hover {
background-color: #222211;
color: #bb9944;
border-color: #664422;
border-style: solid;
border-width: 1px;
}
.content {
background-color: rgba(34, 34, 17, .7);
height: 2000px;
width:800px;
color: #bb9944;
margin-left: 5px;
margin-bottom: 10px;
display: inline-block;
font-family: 'Open Sans', sans-serif;
padding: 5px;
border-radius: 5px;
float: left;
}
.content a {
color: #bb9944;
margin-left: 4em;
font-size: 150%;
}
p.clear {
clear: both;
}
p {
font-size: 150%;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-family: 'Open Sans', sans-serif;
}
#rentals {
text-align: center;
border-style: solid;
}
#rentals td {
border-style: solid;
}
#slideshow {
margin-left: 5px;
position: relative;
width: 470px;
height: 400px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.8);
display: inline-block;
border-radius: 5px;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#slideshow img {
height: 400px;
width: 470px;
border-style: solid;
border-width: 1px;
border-color: #664422;
}
以此代碼爲中心我，你有沒有其他的CSS應用於圖像？ https://jsfiddle.net/szzqdrsh/ – Keith
請不要使用'
我不這麼認爲。我會更新這篇文章將我的完整代碼。 –