使用CSS中心HTML Div

我如何将下面的div与下面的CSS水平居中。我试过各种方法，但似乎没有任何工作。我能做些什么来解决这个问题？非常感谢你。使用CSS中心HTML Div

CSS：

@import "compass/css3"; 
 

 
    .flexsearch--wrapper 
 
    { 
 
    \t max-width: 90%; 
 
    \t overflow: hidden; 
 
    \t background: transparent; 
 
    } 
 
    \t 
 
    .flexsearch--form { 
 
    \t overflow: hidden; 
 
    \t position: relative; 
 
    } 
 
    \t 
 
    .flexsearch--input-wrapper { 
 
    \t padding: 0 66px 0 0; /* Right padding for submit button width */ 
 
    \t overflow: hidden; 
 
    } 
 
    
 
    .flexsearch--input { 
 
     width: 100%; 
 
    } 
 
    
 
    /*********************** 
 
    * Configurable Styles * 
 
    ***********************/ 
 
    .flexsearch { 
 
     padding: 0 25px 0 200px; /* Padding for other horizontal elements */ 
 
    } 
 
    
 
    .flexsearch--input { 
 
     -webkit-box-sizing: content-box; 
 
    \t -moz-box-sizing: content-box; 
 
    \t box-sizing: content-box; 
 
     \t height: 60px; 
 
     padding: 0 46px 0 10px; 
 
    \t border-color: #333; 
 
     border-radius: 35px; /* (height/2) + border-width */ 
 
     border-style: solid; 
 
    \t border-width: 5px; 
 
     margin-top: 15px; 
 
     color: #333; 
 
     font-family: 'Helvetica', sans-serif; 
 
    \t font-size: 26px; 
 
    \t -webkit-appearance: none; 
 
    \t -moz-appearance: none; 
 
    } 
 
    \t 
 
    .flexsearch--submit { 
 
     position: absolute; 
 
    \t right: 0; 
 
    \t top: 0; 
 
    \t display: block; 
 
    \t width: 60px; 
 
    \t height: 60px; 
 
     padding: 0; 
 
     border: none; 
 
    \t margin-top: 20px; /* margin-top + border-width */ 
 
     margin-right: 5px; /* border-width */ 
 
    \t background: transparent; 
 
     color: #333; 
 
     font-family: 'Helvetica', sans-serif; 
 
     font-size: 40px; 
 
     line-height: 60px; 
 
    } 
 
    
 
    .flexsearch--input:focus { 
 
     outline: none; 
 
     border-color: #333; 
 
    } 
 
    
 
    .flexsearch--input:focus.flexsearch--submit { 
 
     \t color: #333; 
 
    } 
 
    
 
    .flexsearch--submit:hover { 
 
     color: #333; 
 
     cursor: pointer; 
 
    } 
 
    
 
    ::-webkit-input-placeholder { 
 
    \t color: #333; 
 
    } 
 
    
 
    input:-moz-placeholder { 
 
     color: #333 
 
    }

<div class="flexsearch"> 
 
    \t \t <div class="flexsearch--wrapper"> 
 
    \t \t \t <form class="flexsearch--form" action="#" method="post"> 
 
    \t \t \t \t <div class="flexsearch--input-wrapper"> 
 
    \t \t \t \t \t <input class="flexsearch--input" type="search" placeholder="Search"> 
 
    \t \t \t \t </div> 
 
    \t \t \t \t <input class="flexsearch--submit" type="submit" value="&#10140;"/> 
 
    \t \t \t </form> 
 
    \t \t </div> 
 
    </div>

在此先感谢。

来源

2017-06-25 Mikey Mikey

您是否尝试过使用'保证金：0汽车;'？ *“我尝试了各种方法，但似乎没有任何工作”*您尝试过哪些方法？将这些问题包含在你的问题中是相关的，因为它可能会使人们暗示相同或者可能会告诉你为什么这些/这些方法不起作用并为你提供解决方案。 – NewToJS

相当肯定，没有工作，但会尝试。我应该添加哪个div div：0 auto;至？ –

** Itay Ganor **的答案如下所示。：p击败我。 – NewToJS

add margin: auto; to .flexsearch--wrapper。然后，从.flexsearch中删除padding并添加max-width: 350px; margin: auto;。这样输入看起来不错，并且在使用小宽度视口时不会中断。

Thanks @NewToJS。

.flexsearch--wrapper 
 
{ 
 
    max-width: 90%; 
 
    overflow: hidden; 
 
    background: transparent; 
 
    margin: auto; 
 
} 
 

 
.flexsearch--form { 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.flexsearch--input-wrapper { 
 
    padding: 0 66px 0 0; /* Right padding for submit button width */ 
 
    overflow: hidden; 
 
} 
 

 
.flexsearch--input { 
 
    width: 100%; 
 
} 
 

 
/*********************** 
 
* Configurable Styles * 
 
***********************/ 
 
.flexsearch { 
 
    /* padding: 0 200px 0 200px; Padding for other horizontal elements */ 
 
    margin: auto; 
 
    max-width: 350px; 
 
} 
 

 
.flexsearch--input { 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    height: 60px; 
 
    padding: 0 46px 0 10px; 
 
    border-color: #333; 
 
    border-radius: 35px; /* (height/2) + border-width */ 
 
    border-style: solid; 
 
    border-width: 5px; 
 
    margin-top: 15px; 
 
    color: #333; 
 
    font-family: 'Helvetica', sans-serif; 
 
    font-size: 26px; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
} 
 

 
.flexsearch--submit { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    display: block; 
 
    width: 60px; 
 
    height: 60px; 
 
    padding: 0; 
 
    border: none; 
 
    margin-top: 20px; /* margin-top + border-width */ 
 
    margin-right: 5px; /* border-width */ 
 
    background: transparent; 
 
    color: #333; 
 
    font-family: 'Helvetica', sans-serif; 
 
    font-size: 40px; 
 
    line-height: 60px; 
 
} 
 

 
.flexsearch--input:focus { 
 
    outline: none; 
 
    border-color: #333; 
 
} 
 

 
.flexsearch--input:focus.flexsearch--submit { 
 
    color: #333; 
 
} 
 

 
.flexsearch--submit:hover { 
 
    color: #333; 
 
    cursor: pointer; 
 
} 
 

 
::-webkit-input-placeholder { 
 
    color: #333; 
 
} 
 

 
input:-moz-placeholder { 
 
    color: #333 
 
}

<div class="flexsearch"> 
 
     <div class="flexsearch--wrapper"> 
 
      <form class="flexsearch--form" action="#" method="post"> 
 
       <div class="flexsearch--input-wrapper"> 
 
        <input class="flexsearch--input" type="search" placeholder="Search"> 
 
       </div> 
 
       <input class="flexsearch--submit" type="submit" value="&#10140;"/> 
 
      </form> 
 
     </div> 
 
</div>

来源

2017-06-25 12:08:58

编辑过的内容真的在做什么。我不明白200px甚至意味着什么... –

填充作为其名称，在'.flexsearch'边框（这是文档的宽度）与其内容之间添加填充。您可以在[W3Schools]（https://www.w3schools.com/css/css_padding.asp）上阅读有关CSS简写语法的更多信息。在我们的例子中，你想让div居中，所以你需要为左右两边填充相同的填充。这就是为什么你需要编写'padding：0 200px;'或'padding：0 200px 0 200px;'=> 0从顶部填充，从左边填充200px，从底部填充0填充，从右边填充200px。得到它了？ :) –

@MikeyMikey你不需要填充'.flexsearch'你可以删除它并添加'max-width：350px;'和'margin：0 auto;'显然你可以设置你自己的最大宽度。示例https://jsfiddle.net/t2gwwn55/ – NewToJS

使用CSS中心HTML Div

回答

相关问题