Question

我试图将图像上方的文本链接置于简单的表格中。我正在使用css的外部样式表，并尝试了很多东西来简单地将链接文本（Kinni Creek Lodge和River Guide Kayaks）居中，但没有成功。这是一个带有边框的屏幕截图，可帮助您查看正在发生的事情：

以下是表格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;
}

Answer 1

有几种方法可以将元素置于其父级中心。最简单的方法是将子项设置为值 margin：0 auto; 这样做的目的是将上/下边距设置为零，将右/左值设置为彼此相等。另一种方法是使用flexbox。将父级设置为 display：flex;并证明内容：中心

以下两个网站应该有所帮助 - https://css-tricks.com/centering-css-complete-guide/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/

希望这会有所帮助

Answer 2

希望这对你有用：

在css中添加此行：

table#rentals tr td{text-align:center}

麻烦在HTML表格中居文本链接

2 个答案: