Question

我有一个文本框和按钮，两者的样式均为float=left，因为我需要并排放置这两个样式，而display:inline-block不能解决此问题，因为它将放置一些空间或无法垂直对齐或在Mozilla中可以工作，但是不在Chrome中。

具有文本框和按钮的div也具有float=left。

HTML

<div id="CabecalhoArea">

    <div style="float: left; width:180px;">
        bla bla
    </div>

    <div style="float: left; margin-top:10px; width:calc(100% - 650px); text-align:center;">
        <!-- search-->
            <asp:TextBox CssClass="search_text" runat="server" placeholder="search here"/> 
            <asp:Button CssClass="search_button" runat="server"  />
        <!-- //search-->
    </div>

    <div style="float: left; width:310px;">
       bla bla
    </div>


</div>

CSS

#CabecalhoArea{
    position: fixed;
    left:110px;
    top:0px;
    width: 100%;
    height:60px;
    background-color:#ecf0f1;
}

.search_text{
    width: 300px;
    padding: 15px 0 15px 20px;
    font-size: 15px;
    font-family: Montserrat, sans-serif;
    border: 0 none;
    height: 42px;
    margin-right: 0;
    color: #666666;
    outline: none;
    background: #fff;
    float: left;
    box-sizing: border-box;
}

.search_button{
    border: 0 none;
    background: #fff url(search.png) center no-repeat;
    width: 50px; 
    float: left;
    padding: 0;
    text-align: center;
    height: 42px;
    cursor: pointer;
    margin-left:-4px;
}

我尝试：text-align: center;

我尝试：将float=left替换为display:inline-block;

但没有成功...

有什么建议吗？

对不起，我的英语。乔奥

Answer 1

使用Flexbox：

#CabecalhoArea{
  background: dodgerblue;
}
.container{
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="CabecalhoArea">

    <div>
        bla bla
    </div>

    <div class="container">
        <!-- search-->
            <input type="text" class="search_text" runat="server" placeholder="search here"/> 
            <button class="search_button" runat="server">Button</button>
        <!-- //search-->
    </div>

    <div>
       bla bla
    </div>


</div>

Answer 2

使用Flexbox确实是最好的解决方案，但是，我相信这个想法是将所有内容并排对齐。

#CabecalhoArea{
  background: dodgerblue;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div id="CabecalhoArea">

    <div>
        bla bla
    </div>

    <div class="container">
        <!-- search-->
            <input type="text" class="search_text" runat="server" placeholder="search here"/> 
            <button class="search_button" runat="server">Button</button>
        <!-- //search-->
    </div>

    <div>
       bla bla
    </div>


</div>

如何将float = left文本框和按钮居中放置在float = left div中

2 个答案: