Question

我是编码的新手我有一个导航栏，我已经在页面中心...但我希望它集中在我的标题框中。

<div class="header" id="header">
<div class="container">
<div class="row row-centered">
<div class="col-md-4 col-centered">
<div class="box">   
<a href="#"><h2>lewis <br><span>Designs</span></h2></a></div></div></div>
    <div class="menu">
    <div class="row row-centered">
    <div class="col-md-6 col-centered">
<ul class="nav nav-pills"> 
<li><a href="./index.html">About</a></li> 
<li><a href="./consultation.html">Consultations</a></li> 
<li><a href="#">Gallery</a></li> 
<li><a href="#">Contact</a></li> 
</ul></div></div></div> 
    .box {position:relative;
       border: 2px white dotted;
       margin-top: 100px;
       margin-right: auto;
       margin-left: auto;
       width: 400px;
       display:inline-block;}
 .nav-pills li a {color: black;
       border-radius: 10px;
       vertical-align:middle;
        display:inline-block;}
 .header .box { margin-left:auto;
        margin-right:auto;
        position:relative;
        vertical-align: middle;}
  .nav-pills {position: relative;
        margin-top: 40px;
        vertical-align: middle;
        margin-left:auto;
        margin-right:auto;
        text-align:center;}

你能帮忙吗？

Answer 1

将Div的宽度设置为标题框的宽度，这应该达到所需的结果

.col-centered{width:400px}

或者使标题部分的大小与框相同。 }

.header .box {
    width: 100%;}

只要它们的宽度相同，并且您使用文本对齐中心css，那么它们应该正确排列。

导航不是以标题为中心，而是以页面为中心！引导。

1 个答案: