时间戳

首页 > 解决方案 > 在引导程序中居中文本

html - 在引导程序中居中文本

问题描述

我想创建一个网站作为我其他工作的投资组合。但是，我在链接中将文本居中时遇到了很多麻烦。我尝试了多种方法都无济于事。

我要更改的文本是导航部分中的文本“关于我”“投资组合”“技能”“联系人”文本在一行内-->列-->链接

我尝试text-center在整个代码中的多个不同位置应用该类，并且我还尝试使用该text-align函数在我的 CSS 中应用它。没有太多代码，所以我想有一点 HTML 经验的人会很快解决这个问题。

#mainContainer{
    z-index:0;position:fixed; 
    width:100%; height:100%; 
    background-color: white;
}
.headerClass{
    margin-top:auto;
    margin-bottom:auto;
}
#headText{
    color:white;
    font-size: 1.5vw;
    font-family: fantasy;
    vertical-align: middle;
}
#infoBox{
    height:100%;
    width:100%;
}
#infoBoxCol{
    background-repeat: no-repeat;
    background-size:cover;
}
.navbar{
    border-style: solid;
    border-color: white;
    width: 100%;
    color:white;
    font-family:fantasy;
    font-size: 1.1vw;
    text-align:center;
}
.navRoof{
    text-align:center;
    width:100%;
    height:10%;
    background-color:white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid  text-center" id="mainContainer">
    <div class="row" style="background-color: black; height:30%;">
        <div class="col-4 my-auto text-fluid" class="headerClass" id="headText">
            Software Developer
        </div>
        <div class="col-1"></div>
        <div class="col-2 my-auto"><img class="img-fluid" src="images/logo.jpg" style="max-width:85%;"></div>
        <div class="col-1"></div>
        <div class="col-4 my-auto">
            <div class="row" id="navigation">
                <div class="col-3"><a href="Index.php" class=" navbar text-center">About Me</a></div>
                <div class="col-3"><a href="Index.php" class="navbar text-center">Portfolio</a></div>
                <div class="col-3"><a href="Index.php"  class="navbar text-center">Skills</a></div>
                <div class="col-3"><a href="Index.php" class="navbar text-center">Contact</a></div>
            </div>
        </div>
    </div>
</div>

标签： htmlcssbootstrap-4

解决方案

在这里，我使用bootstrap flex而不是 row > col-* 来进行更灵活的设计，你做错的一件事是你正在覆盖引导类“navbar”，它的属性更多是你的新闻属性，这会让你的设计出现问题。如果你想获得响应式设计，使用 vw 作为字体大小的单位也是一个坏主意。

#mainContainer{
    z-index:0;position:fixed; 
    width:100%; height:100%; 
    background-color: white;
}
.headerClass{
    margin-top:auto;
    margin-bottom:auto;
}
#headText{
    color:white;
    font-size: 1.5vw;
    font-family: fantasy;
    vertical-align: middle;
}
#infoBox{
    height:100%;
    width:100%;
}
#infoBoxCol{
    background-repeat: no-repeat;
    background-size:cover;
}
.navRoof{
    text-align:center;
    width:100%;
    height:10%;
    background-color:white;
}
.custom-navbar-container {
  border-style: solid;
  border-color: white;   
}
.custom-link {
  white-space: nowrap;
  color:white;
  font-family:fantasy;
  font-size: 1.1vw;
  padding: .25rem;
  display: block;    
}
.custom-link:hover {
  text-decoration: none;
  color: grey;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid  text-center" id="mainContainer">
    <div class="row" style="background-color: black; height:30%;">
        <div class="col-4 my-auto text-fluid" class="headerClass" id="headText">
            Software Developer
        </div>
        <div class="col-1"></div>
        <div class="col-2 my-auto"><img class="img-fluid" src="images/logo.jpg" style="max-width:85%;"></div>
        <div class="col-1"></div>
        <div class="col-4 my-auto">
            <div class="d-flex" id="navigation">
                <div class="p-1">
                  <div class="custom-navbar-container">  
                    <a href="Index.php" class="custom-link">About Me</a>
                  </div>
                </div>
                <div class="p-1">
                  <div class="custom-navbar-container">  
                    <a href="Index.php" class="custom-link">Portfolio</a>
                  </div>
                </div>
                <div class="p-1">
                  <div class="custom-navbar-container">  
                    <a href="Index.php" class="custom-link">Skills</a>
                  </div>
                </div>
                <div class="p-1">
                  <div class="custom-navbar-container">  
                    <a href="Index.php" class="custom-link">Contact</a>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>

推荐阅读