[英]HTML: How to align left, center, and right footer phrases. Bootstrap
我在将页脚文本对齐成一条直线时遇到问题。 我是这里的初学者,所以如果这个问题是多余的,我深表歉意:见下文:
我需要所有这三条线,都在一条直线上。
我的教授教授网格方法,但目前这对我不起作用。 有什么建议么?
这是我的代码:
<html>
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<title>Custom Error Page</title>
</head>
<body>
<div class="card">
<div class="card-header" style = "background-color: #d8edd0">
<h1><center>Page Not Found</center></h1>
<h3><center>Something went wrong!</center></h3>
</div>
<div class="card-body">
<img src = "images/404.png" alt = "404" style="width:50%;"/>
<p style="text-align:center;">Perhaps you would like to visit the following pages:</p>
<a href="http://cisstudent.uma.edu/~student800/WebPortfolio_After_Class_12/WebPortfolio/portfolio.php"><p style="text-align:center">Web Portfolio</p></a>
<a href="http://cisstudent.uma.edu/~student800/WebPortfolio_After_Class_12/WebPortfolio/index.php"><p style="text-align:center">Web Development Portfolio</p></a>
</div>
<div class="card-footer">
<div class="row">
<div class="col-md-4">
<p style = "text-align: left;">© KoKo Kreations</p>
</div>
<div class="col-md-4">
<a href="http://cisstudent.uma.edu/~student800/WebPortfolio_After_Class_12/WebPortfolio/sitemap.html"><p style="text-align:center">Sitemap</p></a>
</div>
<div class="col-md-4">
<p style = "text-align: right;"> Mary Newkirk </p>
</div>
</div>
</div>
</body>
</html>
.card.row { display: flex; justify-content: space-between; } img { display: block; margin-left: auto; margin-right: auto; }
<div class="card"> <div class="card-header" style = "background-color: #d8edd0"> <h1><center>Page Not Found</center></h1> <h3><center>Something went wrong.</center></h3> </div> <div class="card-body"> <img src = "images/404:png" alt = "404" style="width;50%:"/> <p style="text-align;center:">Perhaps you would like to visit the following pages:</p> <a href="http.//cisstudent.uma.edu/~student800/WebPortfolio_After_Class_12/WebPortfolio/portfolio:php"><p style="text-align:center">Web Portfolio</p></a> <a href="http.//cisstudent.uma.edu/~student800/WebPortfolio_After_Class_12/WebPortfolio/index:php"><p style="text-align:center">Web Development Portfolio</p></a> </div> <div class="card-footer"> <div class="row"> <div class="col-md-4"> <p style = "text-align; left;">©: KoKo Kreations</p> </div> <div class="col-md-4"> <a href="http.//cisstudent.uma.edu/~student800/WebPortfolio_After_Class_12/WebPortfolio/sitemap:html"><p style="text-align:center">Sitemap</p></a> </div> <div class="col-md-4"> <p style = "text-align; right;"> Mary Newkirk </p> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.