无法在div内居中放置div? (html,css)

时间:2019-02-14 09:15:54

标签: html css

我正在尝试将项目放在导航栏中(div内的div)居中,但它要么向右浮动,要么向左浮动,但从未真正居中。

(我使用的导航栏样式为“ navbar-default navbar-fixed-top”。)

topnav2 是一个完美放置在左侧的“徽标”,但我希望将 topnav 中的项目放置在中心 topnav2 中徽标旁边。

.topnav a {
    display: inline-block;
  color: #777777;

  padding: 14px 16px;
  text-decoration: none;
  font-size:22px;
    letter-spacing: 1px;


}

.topnav2 a {
  float: left;
  display: block;
  color: #777777;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size:22px;
    letter-spacing: 1px;
}
<div class="navbar navbar-default navbar-fixed-top">
    <div class="topnav2">
        <a class="navtitle" href="index.html">Projekt</a> 
    </div>
    <div class="topnav" id="myTopnav">
        <a href="#" class="active">Home</a>
        <a href="#">Platzhalter 1</a>
        <a href="#">Platzhalter 2</a>
        <a href="#">Platzhalter 3</a>   
    </div>
</div>

像上面提到的

topnav2 放置在我想要的位置上很完美,但是我不知如何将topnav居于 topnav2

的中心

4 个答案:

答案 0 :(得分:0)

也许您只需要另一个容器即可?

WHERE zip_codes[1] = '11111' OR zip_codes[2] = '11111'
<script>
    var btn = document.getElementById('btnn');
    var tab = document.getElementsByClassName("scope")[0];
    tab.append(btn)
</script>

答案 1 :(得分:0)

只需将PARTITION BY STUDENT_ID,case when course_id<0 then 1 else 2 end order by COURSE_START_DATE DESC CSS赋予元素SELECT STUDENT_ID,COURSE_ID,COURSE_NAME,COURSE_START_DATE FROM ( SELECT ROW_NUMBER() OVER(PARTITION BY STUDENT_ID,case when course_id<0 then 1 else 2 end order by COURSE_START_DATE DESC) AS ROW_NUM , STUDENT_ID,COURSE_ID,COURSE_NAME,COURSE_START_DATE FROM COURSE )TEMP1 WHERE TEMP1.ROW_NUM = 1;

尝试使用此JSFiddle或查看下面的代码可能对您有帮助-

text-align:center
.topnav

答案 2 :(得分:0)

使用flexbox使导航居中,并将链接放在列表项中。

.main-nav {
  display: flex;
  justify-content: center;
  list-style-type: none;
}
.main-nav a {
  margin: 10px;
  border-radius: 5px;
  background: #60B99A;
  color: #fff;
  display: block;
  padding: 10px;
  text-decoration: none;
}
<nav>
  <ul class="main-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">nav 1</a></li>
    <li><a href="#">nav 2</a></li>
    <li><a href="#">nav 3</a></li>
    <li><a href="#">nav 4</a></li>
  </ul>
</nav>

答案 3 :(得分:0)

此代码在我的页面.navbar{ text-align: center; }上正常工作