html - 为什么我的文本是垂直对齐的，而不是水平对齐的？
问题描述
我的网站应该是什么样子
我的网站是什么样的
HTML
<!DOCTYPE html>
<html lang = "en">
<head>
<link rel = "stylesheet" type = "text/css" href="Vendors/CSS/normalize.css">
<link rel = "stylesheet" type = "text/css" href = "Resources/CSS/style.css">
<link rel = "stylesheet" type = "text/css" href = "Vendors/CSS/grid.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<title>Omnifoods</title>
</head>
<body>
<header>
<div class = "hero-text-box">
<h1> Goodbye junk food. <br> Hello super healthy meals.<br></h1>
<a href="#" class="btn btn-full">I'm Hungry!</a>
<a href="#" class="btn btn-ghost">Show me more!</a>
</div>
<nav>
<div class = "row" >
<img src = "Resources/CSS/Images/logo-white.png" alt = "Ominifood Logo" class = "logo">
<ul class = "main-nav">
<li> <a href="#">Food delivery</a> </li>
<li> <a href="#">How it works</a> </li>
<li> <a href="#">Our cities</a> </li>
<li> <a href="#">Sign up</a> </li>
</ul>
</div>
</nav>
</header>
<section class = "section-features">
<div class = "row">
<h2>Get food fast — not fast food.</h2>
<p class="long-copy">Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!</p>
</div>
<div class = "row">
<div class = "col span 1-of-4">
<h3>Up to 365 days/year</h3>
<p>Never cook again! We really mean that. Our subscription
plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.</p>
</div>
<div class = "col span 1-of-4">
<h3>Ready in 20 minutes</h3>
<p>You're only twenty minutes away from
your delicious and super healthy meals delivered right to your home.
We work with the best chefs in each town to ensure that you're 100% happy.</p>
</div>
<div class = "col span 1-of-4">
<h3>100% organic</h3>
<p>All our vegetables are fresh, organic and local.
Animals are raised without added hormones or antibiotics.
Good for your health, the environment, and it also tastes better!</p>
</div>
<div class = "col span 1-of-4">
<h3>Order anything</h3>
<p>All our vegetables are fresh, organic and local. Animals are raised without
added hormones or antibiotics.
Good for your health, the environment, and it also tastes better!</p>
</div>
</div>
</section>
</body>
</html>
**CSS**
/* orange color -> #e67e22 */
/*-------------------------------------- */
/*BASIC SETUP*/
/*-------------------------------------- */
* {margin: 0;
padding: 0;
box-sizing: border-box;}
html{background-color: #fff;
color:#484a4b;
font-family: 'Lato', 'Arial' , sans-serif;
font-size:20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
/*-------------------------------------- */
/* REUSEABLE COMPONENTS */
/*-------------------------------------- */
.row {
max-width:1140px;
margin: 0 auto;}
/*-------------------------------------- */
/* HEADINGS */
/*-------------------------------------- */
h1{margin-top:0;
margin-bottom: 20px;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
/*-------------------------------------- */
/* BUTTONS */
/*-------------------------------------- */
.btn:link,
.btn:visited
{display:inline-block;
font-weight: 300;
padding: 10px 30px;
text-decoration: none;
border-radius: 200px;
color: #fff;
transition: background-color 0.2s, border 0.2s, color 0.2s}
.btn-full:link,
.btn-full:visited
{background-color: #e67e22;
border: 1px, solid, #e67e22;
color:#fff;
margin-right: 15px;}
.btn-ghost:link,
.btn-ghost:visited
{border:1px solid #e67e22;
color: #e67e22;}
.btn:hover,
.btn:active { background-color: #cf6d17;}
.btn-full:active,
.btn-full:hover
{
border: 1px, solid, #e67e22;}
.btn-ghost:active,
.btn-ghost:hover
{border:1px, solid, #cf6d17;
color:white;}
/*-------------------------------------- */
/* MAIN HEADER */
/*-------------------------------------- */
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0,
0.7)),url(Images/hero.jpg);
background-size: cover;
background-position: center;
height:100vh;
}
.hero-text-box {
position:absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.logo {
height: 100px;
width: auto;
float: left;
margin-top:20px;}
.main-nav{
float: right;
list-style: none;
}
.main-nav li {display: inline-block;
margin-left: 40px;
margin-top: 55px;
}
.main-nav li a:link,
.main-nav li a:visited
{color:white;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border: 2px;
}
.main-nav li a:hover,
.main-nav li a:active
{border-bottom: 2px solid #e67e22;
padding: 8px 0px;
}
我已经尝试将文本作为 inline-block 元素，但无济于事。
解决方案
您尚未添加引导程序 CDN 以使引导程序类正常工作。请添加以下链接。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
**CSS**
/* orange color -> #e67e22 */
/*-------------------------------------- */
/*BASIC SETUP*/
/*-------------------------------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #fff;
color: #484a4b;
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
/*-------------------------------------- */
/* REUSEABLE COMPONENTS */
/*-------------------------------------- */
.row {
max-width: 1140px;
margin: 0 auto;
}
/*-------------------------------------- */
/* HEADINGS */
/*-------------------------------------- */
h1 {
margin-top: 0;
margin-bottom: 20px;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
/*-------------------------------------- */
/* BUTTONS */
/*-------------------------------------- */
.btn:link,
.btn:visited {
display: inline-block;
font-weight: 300;
padding: 10px 30px;
text-decoration: none;
border-radius: 200px;
color: #fff;
transition: background-color 0.2s, border 0.2s, color 0.2s
}
.btn-full:link,
.btn-full:visited {
background-color: #e67e22;
border: 1px, solid, #e67e22;
color: #fff;
margin-right: 15px;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #e67e22;
color: #e67e22;
}
.btn:hover,
.btn:active {
background-color: #cf6d17;
}
.btn-full:active,
.btn-full:hover {
border: 1px, solid, #e67e22;
}
.btn-ghost:active,
.btn-ghost:hover {
border: 1px, solid, #cf6d17;
color: white;
}
/*-------------------------------------- */
/* MAIN HEADER */
/*-------------------------------------- */
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0,
0.7)), url(Images/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
height: 100px;
width: auto;
float: left;
margin-top: 20px;
}
.main-nav {
float: right;
list-style: none;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
margin-top: 55px;
}
.main-nav li a:link,
.main-nav li a:visited {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border: 2px;
}
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #e67e22;
padding: 8px 0px;
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Omnifoods</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1> Goodbye junk food. <br> Hello super healthy meals.<br></h1>
<a href="#" class="btn btn-full">I'm Hungry!</a>
<a href="#" class="btn btn-ghost">Show me more!</a>
</div>
<nav>
<div class="row">
<img src="Resources/CSS/Images/logo-white.png" alt="Ominifood Logo" class="logo">
<ul class="main-nav">
<li> <a href="#">Food delivery</a> </li>
<li> <a href="#">How it works</a> </li>
<li> <a href="#">Our cities</a> </li>
<li> <a href="#">Sign up</a> </li>
</ul>
</div>
</nav>
</header>
<section class="section-features">
<div class="container">
<div class="row">
<h2>Get food fast — not fast food.</h2>
<p class="long-copy">Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col span 1-of-4">
<h3>Up to 365 days/year</h3>
<p>Never cook again! We really mean that. Our subscription
plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.</p>
</div>
<div class="col span 1-of-4">
<h3>Ready in 20 minutes</h3>
<p>You're only twenty minutes away from
your delicious and super healthy meals delivered right to your home.
We work with the best chefs in each town to ensure that you're 100% happy.</p>
</div>
<div class="col span 1-of-4">
<h3>100% organic</h3>
<p>All our vegetables are fresh, organic and local.
Animals are raised without added hormones or antibiotics.
Good for your health, the environment, and it also tastes better!</p>
</div>
<div class="col span 1-of-4">
<h3>Order anything</h3>
<p>All our vegetables are fresh, organic and local. Animals are raised without
added hormones or antibiotics.
Good for your health, the environment, and it also tastes better!</p>
</div>
</div>
</div>
</section>
</body>
</html>确保您始终使用容器 div 类并在其中使用行 div 类。
推荐阅读
- python - 为什么这个 Python 代码中的 memoization 不起作用？
- python - 使用 pygame 和套接字的“SyntaxError：解析时出现意外 EOF”
- python - 如何使用 Tweepy 从私人帐户流式传输推文
- javascript - 为什么我提交后没有显示我的数据？我没看出有什么不对吗？
- html - 为什么我的消息 UI 上没有显示溢出滚动条？
- python - 如果 B 为正，CVXPY 将 Z 设置为 1
- kubernetes - EKS 跨集群内部 DNS 查找
- javascript - 如何在 ejs 文件中使用传递的变量
- python - 如何在python中将每对列表转换为元组
- javascript - 在正在测试的主函数中调用的模拟静态函数