个人中心
gpt4 book ai didi

html - HTML 表格中的文本链接居中问题

转载 作者：行者123 更新时间：2023-11-28 06:17:35 25 4
gpt4 key购买 nike

我试图在一个简单的表格中将图像上方的文本链接居中。我正在为 css 使用外部样式表，并尝试了很多方法来简单地将链接文本(Kinni Creek Lodge 和 River Guide Kayaks)居中，但没有成功。这是带有边框的表格的屏幕截图，以帮助可视化正在发生的事情:

Image

这是表格的 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;
}

最佳答案

有几种方法可以使元素在其父元素中居中。最简单的方法是将子项设置为 ma​​rgin: 0 auto; 这样做的目的是将上/下边距设置为零，将右/左值设置为彼此相等。另一种方法是使用 flexbox。将父级设置为 display:flex;和 justify-content:center

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

希望对你有帮助

关于html - HTML 表格中的文本链接居中问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35801480/

25 4 0
文章推荐： ios - 与 Facebook Messenger 分享文字
文章推荐： html - 为什么我的父元素将最后一个字换行？ (内部 float 元素)
文章推荐： c++ - 将函数调用计时为 cpp 中的 if 语句条件
文章推荐： html - 带有子菜单 CSS HTML 的下拉菜单
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com