我是这里的新手,我仅为这个问题创建了这个帐户。我是一名高中学生,我们受命创建一个网站。我正在尝试在导航栏的中间添加该网站的名称,但是尝试了四个小时之后,我却无法这样做。
这是网站:www.turing.gjh.sk/~vano.m/infoot.php
这是我的代码:
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
<i class='fas fa-bars' style='color:#66fcf1'></i> <span class='text' style='margin-left:0.5vh'>.menu</span>
</a>
<div class="dropdown-menu text-light animate slideIn">
<a class="dropdown-item" href="#">Články</a>
<a class="dropdown-item" href="#">Kontakt</a>
<a class="dropdown-item" href="#">O nás</a>
</div>
</li>
</ul>
<div class="align-items-center"><h5>infoot<span>.sk</span></h5></div>
<?php
if (!isset($_SESSION['user'])){ ?>
<ul class="nav navbar-nav justify-content-between ml-auto">
<li class="dropdown order-1">
<button type="button" id="dropdownMenu1" data-toggle="dropdown" class="btn btn-outline-secondary dropdown-toggle">Login <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right mt-2">
<li class="px-3 py-2">
<form class="form" role="form" method="post" action="infoot.php">
<div class="form-group">
<input name="meno" id="emailInput" placeholder="Meno" class="form-control form-control-sm" type="text" required="">
</div>
<div class="form-group">
<input name="heslo" id="passwordInput" placeholder="Heslo" class="form-control form-control-sm" type="password" required="">
</div>
<div class="form-group">
<button type="submit" class="btn btn-dark btn-block" name="tlacidlo">Login</button>
</div>
</form>
</li>
</ul>
</li>
<li class="dropdown order-2">
<button type="button" id="dropdownMenu2" data-toggle="dropdown" class="btn btn-outline-secondary dropdown-toggle">Register <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right mt-2">
<li class="px-3 py-2">
<form class="form" role="form" method="post" action="infoot.php">
<div class="form-group">
<input name="meno" id="emailInput" placeholder="Meno" class="form-control form-control-sm" type="text" required="">
</div>
<div class="form-group">
<input name="heslo" id="passwordInput" placeholder="Heslo" class="form-control form-control-sm" type="password" required="">
</div>
<div class="form-group">
<button type="submit" class="btn btn-dark btn-block" name="register">Register</button>
</div>
</form>
</li>
</ul>
</li>
</ul>
<?php }
else{ ?>
<ul class="nav navbar-nav ml-auto align-items-center">
<a class="navbar-brand"><span class='text'>.vitaj, <?php echo $_SESSION['user']; ?></span></a>
<a href="logout.php"><span class="fas fa-sign-out-alt"></span></a>
</ul>
<?php } ?>
</nav>
我需要对齐的是这个:
<div class="align-items-center"><h5>infoot<span>.sk</span></h5></div>
您想使用Flexbox或Grid在现代工具上做得很好。结帐W3Schools.com,这是一个学习HTML / CSS / Js的好网站。a link!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
display: grid;
grid-template-columns: auto auto auto;
width: 100%;
margin: 0;
padding: 0;
background-color: #444;
}
.topnav div {
float: left;
color: #FFF;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 24px;
font-weight: 700;
}
</style>
</head>
<body>
<div>
<h1>TITLE</h1>
</div>
<div class="topnav">
<div>LEFT</div>
<div>CENTER</div>
<div>RIGHT</div>
</div>
<div>
<h3><strong>BODY MARKUP HERE...</strong></h3>
</div>
</body>
</html>
在您的CSS中使用属性:
align-self:center;
如果不起作用,请尝试更改引导程序类:
[justify-content-between
至justify-content-center