时间戳

首页 > 解决方案 > 如何在我的情况下水平居中项目？

html - 如何在我的情况下水平居中项目？

问题描述

我需要将我的.inner_header水平居中，但无论我尝试什么，一切都总是粘在左边。在不同的帖子中，人们建议这样做：

.parent { 显示：弹性；证明内容：中心；对齐项目：居中；}

.child { 显示：内联块；}

在我的情况下，父母是 .header，孩子是 .inner_header，但它不起作用。

有什么建议么？

这是我的 CSS 和 HTML：

.header{

width: 100%;
height: 80px;
display: block;
background-color: white;
}

.inner_header {

width: 95%;
height: 100%;
display: block;
margin: 0 auto;

}

.logo_container{

height: 100%;
display: table;
float: left;

}

.logo_container2{

height: 100%;
display: table;
float: right;

}

.logo_container h1{

color: black;
height: 100%;
display: table-cell;
vertical-align: middle;
font-size: 32px;
font-weight: 200;

}

.logo_container2 h1{

color: black;
height: 100%;
display: table-cell;
vertical-align: middle;
font-size: 32px;
font-weight: 200;

}

.logo_container h1 span{

font-weight: 800;
}

.logo_container2 h1 span{

    font-weight: 800;
}

.navigation {

float: left;
height: 100%;
padding: 0;
}

.navigation a{

height: 100%;
display: table;
float: left;
padding: 0px 20px;
}

.navigation a:last-child{

padding-right: 0;
}

.navigation a li {

display: table-cell;
vertical-align: middle;
height: 100%;
color: black;
font-size: 15px;
}
<body>
  <div class="header">
   <div class="inner_header">
     
    <ul class="navigation">
    
     <div class="logo_container">     
      <h1>LOGO<span>1</span></h1>
       </div>
           <a><li>LINK</li></a>
           <a><li>LINK</li></a>
           <a><li>LINK</li></a>
           <a><li>LINK</li></a>
           <a><li>LINK</li></a>
           <a><li>LINK</li></a>
        <div class="logo_container2">
      <h1>LOGO<span>2</span></h1>
     </div>
     
    </ul>
     
   </div>
  </div>

标签： htmlcss

解决方案

尝试使用它，如果有 CSS 与之冲突，它会以水平为中心有时不起作用：

.inner_header {
margin: 0 auto;
}

推荐阅读